Ошибка scrollIntoView () в Chrome - PullRequest
Новая
       9

Ошибка scrollIntoView () в Chrome

0 голосов
/ 02 сентября 2018

Я пытаюсь добиться эффекта, при котором я могу прокручивать переход от одного идентификатора к другому. В основном, я прокручиваю вниз на div-1 и запускаю событие на свитке и перехожу на div-2 и наоборот. Мне удалось добиться этого в ванильном JS. Это мерцает на Chrome, но работает гладко на других браузерах (кроме дедушки IE). Кто-нибудь знает, что может быть причиной, и какое решение или альтернативу я могу получить? 

document.getElementById("scroll-div1").addEventListener("wheel", myFunction1);

function myFunction1() {
    document.getElementById("scroll-div1").addEventListener('wheel', function(e) {
  if (e.deltaY > 0) {
    document.getElementById("scroll-div2").scrollIntoView();
  }
  else if (e.deltaY < 0) {
       window.scrollTo(0,0);
  }
});
} 

document.getElementById("scroll-div2").addEventListener("wheel", myFunction2);

function myFunction2() {
        document.getElementById("scroll-div2").addEventListener('wheel', function(e) {
  if (e.deltaY > 0) {
    document.getElementById("scroll-div3").scrollIntoView();
  }
  else if (e.deltaY < 0) {
       window.scrollTo(0,0);
  }
});
} 

document.getElementById("scroll-div3").addEventListener("wheel", myFunction3);

function myFunction3() {
        document.getElementById("scroll-div3").addEventListener('wheel', function(e) {
    if (e.deltaY < 0) {
       document.getElementById("scroll-div2").scrollIntoView();
  }
});
} 
<div id="scroll-div1" style="height: 768px; overflow: auto;">
<p>This is div 1</p>
</div>
<div id="scroll-div2" style="height: 768px">
<p>This is div 2</p>
</div>
<div id="scroll-div3" style="height: 768px">
<p>This is div 3</p>
</div>

1 Ответ

0 голосов
/ 03 сентября 2018

Поэтому я попытался также использовать jQuery с различными методами, и, похоже, проблема в браузерах, поддерживающих синхронную / асинхронную прокрутку. В этом случае, кажется, в Chrome асинхронная прокрутка , которая задерживает обратные вызовы прокрутки. Так что на данный момент, в сентябре 2018 года, я не могу дать определенный эффект, который искал, и жду каких-то улучшений в будущем.

Ссылка: https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects

...