Utilisation de scrollIntoView avec un en-tête à position fixe

Question

J'ai un site dont l'en-tête est défini comme suit position: fixed . Sur une de mes pages, j'utilise scrollIntoView(true) sur un élément. Mon problème est que lorsque scrollIntoView est appelé, l'élément est positionné sous l'en-tête. Comment puis-je corriger ce problème pour que l'élément soit affiché juste en dessous de l'en-tête ?

J'utilise le framework Bootstrap et l'en-tête est stylé avec navbar navbar-fixed-top .

Answer 1

Essayez ce qui suit. Cela fonctionne bien pour moi :

  const headerHeight = 50; /* PUT HEADER HEIGHT HERE */
  const buffer = 25; /* MAY NOT BE NEEDED */
  const scrollToEl = document.querySelector("#YOUR-ELEMENT-SELECTOR");

  const topOfElement = window.pageYOffset + scrollToEl.getBoundingClientRect().top - headerHeight - buffer;
  window.scroll({ top: topOfElement, behavior: "smooth" });

Answer 2

Si quelqu'un rencontre des problèmes avec la marge supérieure de votre div conteneur qui est ignorée après un scrollIntoView, alors au lieu de faire défiler votre élément dans la vue, faites simplement un scrollTop relatif à son conteneur défilant parent, comme tel :

var topOfElementToView= $('#elementToScroll').position().top;
$('#parentScrollingContainer').scrollTop(topOfElementToView);

J'ai obtenu la réponse de l'utilisateur 113716 sur ce fil : Comment accéder à un élément spécifique de la page ?

Answer 3

Je soupçonne que ce qui fonctionnera pour l'individu dépendra grandement de sa mise en page, donc cette réponse est destinée à être une option supplémentaire plutôt qu'à usurper qui que ce soit.

Tout ce que j'avais à faire était de passer false pour faire défiler en vue scrollIntoView(false)

it('should be able to click a button selector', function () {
    let EC = protractor.ExpectedConditions;
    let button = element(by.css('.my-button-css));

    browser.executeScript('arguments[0].scrollIntoView(false)', button.getWebElement()).then(function () {
        browser.wait(EC.elementToBeClickable(button), 3000).then(function () {
            expect(button.isDisplayed()).toBeTruthy();
            button.click();

            // more test logic here

        });
    });
});

Merci à jeff reboot

Answer 4

Dans le cas où quelqu'un a une barre de navigation fixe qui cache l'en-tête. \Title après le défilement, voici la solution (basée sur @coco puffs et la réponse de éste ) :

let anchorLinks = document.querySelectorAll('a[href^="#"]')

for (let item of anchorLinks) {
  item.addEventListener('click', (e) => {
    let hashVal = item.getAttribute('href')
    let topOfElement = document.querySelector(hashVal).offsetTop - 70

    window.scroll({ top: topOfElement, behavior: "smooth" })
    history.pushState(null, null, hashVal)
    e.preventDefault()
  })
}

Dans le code 70px sont utilisés.

Answer 5

Pour moi, faire défiler l'élément au centre de la fenêtre aurait fonctionné.

scrollIntoViewIfNeeded({ block: "center" }) fait cela très bien mais n'a malheureusement qu'une compatibilité limitée avec les navigateurs ( https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded ). Il ne fonctionne pas sur IE et Firefox.

Vous pouvez cependant construire vous-même cette fonction assez facilement :

function scrollIntoCenter(element) {
  // first scroll element into view. This means element is at the very top.
  element.scrollIntoView();

  // calculate new scrollYPosition by subtracting half of window-height
  let y = window.scrollY - window.innerHeight/2;

  // scroll up by half of window height
  window.scroll(0, y);
}