Я работаю над приложением на основе браузера, в настоящее время я занимаюсь разработкой и стилем для браузера ipad safari.
Я ищу на ipad две вещи: как отключить вертикальную прокрутку для страниц, которые в ней не нуждаются? и как отключить эффект упругого отскока?
Ответы:
Этот ответ больше не применим, если вы не разрабатываете для очень старого устройства iOS ... См. Другие решения
Ответ 2011 года: для веб-приложения / html-приложения, работающего в iOS Safari, вам нужно что-то вроде
Для iOS 5 вы можете принять во внимание следующее: document.ontouchmove и прокрутка в iOS 5.
Обновление от сентября 2014 г. Более подробный подход можно найти здесь: https://github.com/luster-io/prevent-overscroll . Для этого и множества полезных советов по
веб-приложениямсм.Http://www.luster.io/blog/9-29-14-mobile-web-checklist.html.Обновление март 2016 г .: эта последняя ссылка больше не активна - см. Https://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-mobile-web-checklist .html для заархивированной версии. Спасибо @falsarella за указание на это.
источник
onTouchMove: function(e) { e.stopPropagation(); e.stopImmediatePropagation(); }
Это предотвратит попадание события в тело, но тело останется непрыгающим. Изменить: предполагается, что вы установили $ ('div'). On ('touchmove', ... onTouchMove);Вы также можете изменить положение body / html на фиксированное:
источник
Чтобы предотвратить прокрутку в современных мобильных браузерах, вам нужно добавить passive: false. Я выдергивал волосы, заставляя это работать, пока не нашел это решение. Я нашел это только в одном месте в Интернете.
источник
{ passive: false }
него точно не работает !!! Добро пожаловать на StackOverflow, чувакoverflow-y: scroll
? Например, наличие модального окна с большей высотой просмотра, чем тело.Для этого вы можете использовать этот фрагмент кода jQuery:
Это заблокирует вертикальную прокрутку, а также любой эффект возврата на ваши страницы.
источник
В контейнере вы можете установить эффект отскока внутри элемента
Источник: http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/
источник
overflow:hidden
тем<body>
, это все еще лучшее решение. Однако при открытии клавиатуры или скольжении по нижней части экрана она больше не будет работать.Я знаю, что это немного нестандартно, но я использовал Swiffy для преобразования Flash в интерактивную игру HTML5 и столкнулся с той же проблемой прокрутки, но не нашел решений, которые работали бы.
Проблема заключалась в том, что этап Swiffy занимал весь экран, поэтому, как только он загрузился, событие touchmove документа никогда не запускалось.
Если я пытался добавить это же событие в контейнер Swiffy, оно заменялось сразу после загрузки сцены.
В конце концов я решил это (довольно беспорядочно), применив событие touchmove к каждому DIV на сцене. Поскольку эти div также постоянно менялись, мне нужно было постоянно их проверять.
Это было мое решение, которое, кажется, работает хорошо. Надеюсь, это поможет всем, кто пытается найти то же решение, что и я.
источник
Код для удаления ipad safari: отключите прокрутку и эффект отскока
Если у вас есть холст тег внутри документа, где- то это будет влиять на удобство объекта внутри Canvas (например: движение объекта); поэтому добавьте ниже код, чтобы исправить это.
источник
Попробуйте это решение JS :
Предотвращает прокрутку и жесты отскока в Safari по умолчанию без отключения прослушивателей событий касания.
источник
ни одно из решений у меня не работает. Вот как я это делаю.
источник
Проверено на iphone. Просто используйте этот CSS в контейнере целевого элемента, и он изменит поведение прокрутки, которое останавливается, когда палец покидает экран.
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling
источник
Для тех, кто использует MyScript в веб-приложении и борется с прокруткой / перетаскиванием тела (на iPad и планшетах) вместо того, чтобы писать:
<body touch-action="none" unresolved>
Это исправило это для меня.
источник
Вы можете использовать js для предотвращения прокрутки:
И чем просто запустить / остановить
toggleScroll
функцию при открытии / закрытии модального окна.Как это
toggleScroll(true) / toggleScroll(false)
(Это только для iOS, на Android не работает)
источник
Попробуйте это решение JS, которое переключает
webkitOverflowScrolling
стиль. Хитрость здесь в том, что этот стиль отключен, мобильный Safari переходит на обычную прокрутку и предотвращает чрезмерный отскок - увы, он не может отменить текущее перетаскивание. Это сложное решение также отслеживает,onscroll
как отскок сверху создаетscrollTop
негатив, который можно отследить. Это решение было протестировано на iOS 12.1.1 и имеет единственный недостаток: при ускорении прокрутки все еще происходит одиночный избыточный отскок, поскольку сброс стиля может не отменить его немедленно.источник
улучшенный ответ @Ben Bos и прокомментированный @Tim
Этот CSS поможет предотвратить прокрутку и проблемы с производительностью при повторном рендеринге CSS, потому что положение изменилось / небольшое отставание без ширины и высоты
источник
Для тех из вас, кто не хочет избавляться от подпрыгивания, а просто хочет знать, когда он останавливается (например, чтобы начать вычисление расстояний до экрана), вы можете сделать следующее (контейнер - это переполняющийся элемент контейнера):
источник
Отключить эффект прокрутки сафари отскоком:
источник
Подобно сердитому киви, я заставил его работать с использованием высоты, а не положения:
источник
Решение протестировано, работает на iOS 12.x
Это проблема, с которой я столкнулся:
Пока я прокручиваю свою галерею, тело всегда прокручивается само (человеческий жест не совсем горизонтален), что делает мою галерею бесполезной.
Вот что я сделал, пока моя галерея начала прокручиваться
И когда моя галерея перестанет прокручиваться ...
Надеюсь, это поможет ~
источник