Низкая производительность прокрутки наложения, переполнение тела скрыто на chrome - PullRequest
Новая
       9

Низкая производительность прокрутки наложения, переполнение тела скрыто на chrome

1 голос
/ 09 июля 2020

Я хочу предотвратить прокрутку текста, если отображается наложение. И я использую lazyload для элементов списка, что означает, что прослушиватель событий прокрутки занимает некоторое время. (заменено пустым l oop в приведенном ниже коде.)

Однако установка overflow: hidden приводит к плохой производительности оверлейной прокрутки или, по крайней мере, не такой хорошей, как у других, в Chrome 83 на Windows (с заглушкой) и Android, но Firefox Android кажется хорошим.

Как overflow: hidden имеет значение? Как предотвратить снижение производительности?

Изменить: низкая производительность означает заметную задержку при прокрутке. Прокрутка не плавная, вы можете почувствовать контент прыжок , что плохо для пользователя. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #scroll-container {
        overflow-y: scroll;
        height: 100vh;
        width: 60vw;
        background-color: aliceblue;
        position: fixed;
        top: 0;
        right: 0;
      }
      #body-content {
        background-color: antiquewhite;
      }
      #toggle {
        position: fixed;
        top: 1em;
        left: 1em;
      }
    </style>
    <script>
      const $ = document.querySelector.bind(document);
      window.addEventListener("load", () => {
        for (const parent of [$("#scroll-content"), $("#body-content")]) {
          for (let i = 0; i < 1000; i++) {
            const p = document.createElement("p");
            p.innerText = "paragraph" + i;
            parent.appendChild(p);
          }
        }
        $('#toggle').addEventListener('click', () => {
          const current = $('body').style.overflowY
          $('body').style.overflowY = current ? '' : 'hidden' 
        })
        $('#scroll-container').addEventListener('scroll', () => {
          for (let i = 0; i < 200000000; i++);
        })
      });
    </script>
  </head>
  <body>
    <div id="body-content"></div>
    <button id="toggle">Toggle Overflow</button>
    <div id="scroll-container">
      <div id="scroll-content"></div>
    </div>
  </body>
</html>

1 Ответ

0 голосов
/ 09 июля 2020

Можно использовать javascript, чтобы установить css для тела всякий раз, когда модальное окно отображается / скрывается, без использования свойства overflow. 

// When the content is shown, we want a fixed body
document.body.style.position = 'fixed';
document.body.style.top = `-${window.scrollY}px`;

// When the content is hidden or closed...
const scrollY = document.body.style.top;
document.body.style.position = '';
document.body.style.top = '';
window.scrollTo(0, parseInt(scrollY || '0') * -1);

Вторая строка кода фиксирует текущую позицию на body, когда модальный / оверлей открыт. В противном случае действие по умолчанию - прокрутка вверх, когда она закрыта. Если вы хотите именно такого поведения, не стесняйтесь об этом. Большая часть второй группы кода предназначена просто для перемещения представления обратно в правильную позицию в body. Можно упростить использование только второй строки, если вы хотите оставить пользователя наверху.

...