У меня есть вопрос подкачки, объединяющий его с nanoscroller

#javascript #html #css #pagepiling.js #nanoscroller

#javascript #HTML #css #pagepiling.js #nanoscroller

Вопрос:

У меня есть этот пример веб-сайта, http://www.miguelonenterprises.com/horizontalScroll.html .

Проблема, с которой я сталкиваюсь с этим сайтом, заключается в следующем: это страница подкачки. Если бы я поместил мышь внутри раздела nanoscroller и прокрутил вниз, страница будет прокручиваться до второй страницы. Что я хочу сделать, так это то, что когда мышь находится внутри раздела nanoscroller, она прокручивает раздел nanoscroller вверх и вниз, не перемещая страницу подкачки на следующую страницу. Если мышь находится за пределами раздела nanoscroller, она переходит на следующую страницу подкачки.

У кого-нибудь есть идеи?

Ответ №1:

Используйте эту normalScrollElements опцию. Как подробно описано в pagePiling.js документы:

normalScrollElements: (по умолчанию null ) Если вы хотите избежать автоматической прокрутки при прокрутке некоторых элементов, вам нужно использовать этот вариант. (полезно для карт, прокрутки divs и т. Д.) Для этих элементов требуется строка с селекторами jQuery. (Например: normalScrollElements: ‘#element1, .element2’)

1. Итак, следуя этому предложению, я добавил normalScrollElements: ‘#section1’ к параметрам. Теперь получается, что я могу прокручивать наноскроллер вверх и вниз, не переходя на следующую страницу, но если я перемещаю мышь за пределы наноскроллера и прокручиваю вниз, страницы вообще не перемещаются. Фактически, единственный способ, которым я могу перемещать страницы с включенной этой опцией, — это щелкнуть точки справа или с помощью клавиш page up / page down . Колесо прокрутки вне nanoscroller практически бесполезно. Я обновил образец веб-сайта, чтобы отразить изменения.

2. Это может быть ошибка в pagePilign.js затем. Я бы посоветовал вам попробовать использовать fullPage.js вместо этого, который является его старшим братом, и он поддерживается гораздо чаще. Используя расширение параллакса со смещением 100%, вы можете получить довольно похожий эффект.

Ответ №2:

Хорошо, я только что просмотрел другую запись. Я изменил запись на normalScrollElements: ‘.main’, и это сработало отлично. Спасибо за идею, теперь я могу продолжить этот проект.