Проблемы с прокруткой веб-страниц iOS

Проблема. Я разработал базовый веб-сайт с помощью GoDaddy Website Builder V7. Посмотреть его можно здесь --> oktoberfestvisits.com. Он не поддерживает iPad и не оптимизирован каким-либо образом, поскольку у меня очень мало контроля над генерируемым HTML и т. Д. Все страницы отображаются правильно, однако у меня есть две проблемы, которых я не понимаю.

  1. При попытке быстро прокрутить, т.е. прокручивая вниз или вверх, страница прокручивается примерно на 5 строк за раз. Есть ли на странице что-то, что контролирует или предотвращает плавную прокрутку (Momentum Scrolling)? Все остальные веб-сайты и веб-страницы прокручиваются нормально.

  2. Находясь в середине страницы, прикосновение к черной строке заголовка в верхней части экрана не приводит к возврату к началу страницы. Как и выше, есть ли что-то, что контролирует или предотвращает это? Как и выше, все остальные веб-сайты и веб-страницы работают нормально.

При необходимости я могу внести некоторые незначительные дополнения в HTML, но я не знаю, чем это вызвано. Есть ли что-то, что должно быть на моих страницах, чтобы iPad прокручивал плавно?


ios smooth-scrolling
person Keith Vozel    schedule 04.10.2014    source источник

Ответы (3)


arrow_upward
5
arrow_downward 

.sc {
        -webkit-overflow-scrolling: touch;
    }

Добавьте этот код css в таблицу стилей, а затем добавьте класс «sc» на страницу, с которой связана эта прокрутка. Например, если вы кладете палец на поле <input /> и быстро прокручиваете, но он не прокручивается, тогда поместите класс sc в поле ввода или добавьте его к его родительскому элементу.

e.g.

<div class="sc">
   <div class="form-group sc">
         <input type="text" placeholder="First Name"/>
     </div>
     <div class="form-group sc">
         <input type="text" placeholder="Last Name"/>
     </div>
     <div class="form-group sc">
         <input type="text" placeholder="Email"/>
     </div>
     <div class="form-group sc">
         <input type="text" placeholder="Property Units"/>
     </div>
 </div>
person Aftab Ahmed    schedule 31.07.2017
comment
Помните об этом предупреждении: developer.mozilla.org /en-US/docs/Web/CSS/ - person SFin; 05.03.2019

arrow_upward
0
arrow_downward

Вся страница находится в div с position: absolute;. Я думаю, что это вызывает ошибку прокрутки на iOS.

person Andreas Krischer    schedule 04.10.2014
comment
Поскольку я не могу контролировать большую часть того, что генерируется, могу ли я как-то переопределить это? - person Keith Vozel; 04.10.2014

arrow_upward
0
arrow_downward

Похоже, что iOS имеет задержку прокрутки при использовании overflow: hidden или overflow-x: hidden. Постарайтесь избежать этого.

person JoostS    schedule 08.03.2018