Я работаю над веб-приложением для iPad, и мне нужно предотвратить чрезмерную прокрутку, чтобы оно меньше походило на веб-страницу. В настоящее время я использую это, чтобы заморозить область просмотра и отключить прокрутку:
document.body.addEventListener('touchmove',function(e){
e.preventDefault();
});
Это отлично работает, чтобы отключить прокрутку, но в моем приложении есть несколько прокручиваемых div, и приведенный выше код предотвращает их прокрутку .
Я ориентируюсь только на iOS 5 и выше, поэтому я избегал хакерских решений, таких как iScroll. Вместо этого я использую этот CSS для своих прокручиваемых div:
.scrollable {
-webkit-overflow-scrolling: touch;
overflow-y:auto;
}
Это работает без сценария прокрутки документа, но не решает проблему прокрутки div.
Есть ли способ использовать исправление overscroll без плагина jQuery, но исключить мои $ ('. Scrollable') divs?
РЕДАКТИРОВАТЬ:
Я нашел подходящее решение:
// Disable overscroll / viewport moving on everything but scrollable divs
$('body').on('touchmove', function (e) {
if (!$('.scrollable').has($(e.target)).length) e.preventDefault();
});
Область просмотра по-прежнему перемещается при прокрутке за начало или конец div. Я бы хотел найти способ отключить и это.
Ответы:
Это решает проблему, когда вы прокручиваете начало или конец div.
Обратите внимание, что это не сработает, если вы хотите заблокировать прокрутку всей страницы, когда у div нет переполнения. Чтобы заблокировать это, используйте следующий обработчик событий вместо указанного выше (адаптированного из этого вопроса ):
источник
.scrollable
напрямую (это то, что я изначально пробовал при решении этой проблемы). Если вы новичок в JavaScript и хотите простой код для удаления этих обработчиков где-нибудь в будущем, эти две строки отлично подходят для меня!$(document).off('touchmove');
И$('body').off('touchmove touchstart', '.scrollable');
Использование отличного ответа Тайлера Доджа продолжало отставать на моем iPad, поэтому я добавил немного кода дросселирования, теперь он довольно плавный. Иногда при прокрутке возможны минимальные пропуски.
Кроме того, добавление следующего CSS исправляет некоторые сбои рендеринга ( источник ):
источник
Сначала запретите действия по умолчанию для всего документа, как обычно:
Затем остановите распространение вашего класса элементов на уровень документа. Это не позволяет ему достичь функции, указанной выше, и, следовательно, e.preventDefault () не запускается:
Эта система кажется более естественной и менее интенсивной, чем расчет класса по всем касательным движениям. Используйте .on () вместо .bind () для динамически генерируемых элементов.
Также рассмотрите эти метатеги, чтобы предотвратить неприятности при использовании прокручиваемого div:
источник
Можете ли вы просто добавить немного больше логики в свой код отключения прокрутки, чтобы убедиться, что рассматриваемый целевой элемент не тот, который вы хотели бы прокручивать? Что-то вроде этого:
источник
Лучшее решение для этого - css / html: создайте div для обертывания ваших элементов, если у вас его еще нет, и установите его в положение фиксированное, а переполнение скрыто. Необязательно, установите высоту и ширину на 100%, если вы хотите, чтобы они заполняли весь экран и ничего, кроме всего экрана.
источник
Убедитесь, что прокручиваемый элемент уже прокручивается вверх при попытке прокрутки вверх или вниз при попытке прокрутки вниз, а затем предотвращает действие по умолчанию, чтобы остановить перемещение всей страницы.
источник
Я искал способ предотвратить прокрутку всего тела, когда есть всплывающее окно с прокручиваемой областью (всплывающее окно «корзина покупок», в котором есть прокручиваемый вид вашей корзины).
Я написал гораздо более элегантное решение, используя минимальный javascript, чтобы просто переключать класс «noscroll» на вашем теле, когда у вас есть всплывающее окно или div, которые вы хотите прокрутить (а не «прокручивать» всю страницу).
в то время как настольные браузеры наблюдают overflow: hidden - iOS, похоже, игнорирует это, если вы не установите положение на фиксированное ... что приводит к странной ширине всей страницы, поэтому вам также нужно вручную установить положение и ширину. используйте этот css:
и этот jquery:
источник
Я немного поработал без jquery. Не идеально, но отлично работает (особенно если у вас есть scroll-x в scoll-y) https://github.com/pinadesign/overscroll/
Не стесняйтесь участвовать и улучшать его
источник
Это решение не требует, чтобы вы помещали прокручиваемый класс во все ваши прокручиваемые div, поэтому оно является более общим. Прокрутка разрешена для всех элементов, которые являются или являются дочерними элементами INPUT, contenteditables и overflow scroll или auto.
Я использую настраиваемый селектор и кэширую результат проверки в элементе для повышения производительности. Нет необходимости каждый раз проверять один и тот же элемент. Это может иметь несколько проблем, которые только что написаны, но я думал, что поделюсь.
источник
Хотя отключение всех событий «touchmove» может показаться хорошей идеей, как только вам понадобятся другие прокручиваемые элементы на странице, это вызовет проблемы. Вдобавок ко всему, если вы отключите события touchmove только для определенных элементов (например, тела, если вы хотите, чтобы страница была не прокручиваемой), как только она будет включена где-либо еще, IOS вызовет безостановочное распространение в Chrome, когда URL-адрес бар переключает.
Хотя я не могу объяснить такое поведение, похоже, что единственный способ предотвратить это - установить положение тела на
fixed
. Единственная проблема заключается в том, что вы потеряете положение документа - это особенно раздражает, например, в модальных окнах. Один из способов решить эту проблему - использовать эти простые функции VanillaJS:Используя это решение, вы можете иметь фиксированный документ, а любой другой элемент на вашей странице может переполняться с помощью простого CSS (например,
overflow: scroll;
). Никаких специальных занятий или чего-то еще.источник
Вот решение, совместимое с zepto
источник
этот работает для меня (простой javascript)
html:
источник
Попробуй это будет работать отлично.
источник
Мне повезло с простым:
Он отлично работает, чтобы отключить прокрутку для всплывающих окон или меню, и он не заставляет панели браузера отображаться, как при использовании position: fixed. НО - вам нужно сохранить позицию прокрутки перед установкой фиксированной высоты и восстановить ее при скрытии всплывающего окна, иначе браузер будет прокручиваться вверх.
источник