Как отключить эффект прокрутки веб-страницы по умолчанию в iOS 'Safari?

Question

В закладках iOS 'Safari есть один пункт "Руководство пользователя iPad" или "Руководство пользователя iPad". Открой это. Вы можете видеть, что всю страницу нельзя прокручивать. И разделы на странице можно прокручивать.

Мне нужно добиться того же эффекта. Но я не хочу использовать какие-либо плагины JS, такие как iScroll.

Я использую коды JS ниже, чтобы отключить прокрутку по умолчанию для всей страницы:

document.addEventListener('touchmove', function (event) {
    event.preventDefault();
}, false);

А затем используйте CSS-коды -webkit-overflow-scrolling: touch;, чтобы включить эффект прокрутки для элемента div.

Но проблема в том, что мои CSS-коды не могут работать, если я использую свои JS-коды. Мой элемент div не может быть прокручен, когда пользователи касаются перемещения.

Как решить эту проблему? Спасибо!

Answer 1

Проблема с вашим кодом document.addEventListener.Добавление прослушивателя событий ко всему документу, как вы заметили, приведет к неприятностям.Вместо этого вы должны добавить его только к тем элементам, для которых не требуется прокрутка переполнения iOS (какое-нибудь официальное название для этого?).

Добавление -webkit-overflow-scrolling: touch; приведет к тому, что элемент будет иметь инерционную прокрутку внутри этого элемента, но он будет работать правильно только при первой прокрутке внутри элемента.Так что, если вы нажмете верх или низ элемента с возможностью прокрутки и, например, снова прокрутите до верха, он переместит всю страницу, а не только этот элемент.Я не знаю решения, чтобы это работало должным образом.

Наилучшим решением будет добавление прослушивателя событий для всех элементов с классом no-scroll.Вот так (используя jQuery для выбора элементов с классом для простоты):

$('.no-scroll').on('touchmove', function (event) {
  event.preventDefault();
}, false);

Вы можете предотвратить эффект от второй прокрутки, поместив ее в другой прокручиваемый элемент.Поэтому вместо двойной прокрутки всей страницы будет прокручиваться родительский элемент, если это вообще возможно.

Answer 2

Я пришел сюда в поисках решения проблемы жесткой, наполовину сломанной вертикальной прокрутки в мобильном сафари.

Добавление:

-webkit-overflow-scrolling: touch;

Определенно справляется, но оно сломаетсяoverflow-x: hidden property, если он был установлен выше в порядке.Вы должны иметь возможность применять эти стили к родительскому элементу div, если вы хотите достичь того же эффекта.