Описание функции
-
Требовать
-
Страница разделена на две области: AB
-
Когда нижняя часть видимой области мобильного телефона касается «демпфирующей полосы», происходит упругий процесс подтягивания.
- Когда подтягивание достигает определенного порога, верхняя часть области B напрямую отскакивает к верхней части видимой области мобильного телефона, так что видимая область начинает отображаться из области B.
- Когда уровень подтягивания не достигает порога, он отскакивает и восстанавливается
-
Когда видимая область мобильного телефона прокручивается вверх от области B, верхняя часть области B соприкасается с «демпфирующим ремнем», и происходит упругий процесс опускания.
- Когда вытягивание достигает определенного порога, нижняя часть области A напрямую отражается в нижнюю часть видимой области мобильного телефона, так что видимая область начинает отображаться снизу области A вверх.
- Когда степень вытягивания не достигает порога, она отскочит и восстановит
-
-
намекать
- Доступно с jQuery
Конкретный процесс реализации
Прежде всего, что такое демпфирующий эффект? Проверить онлайн:
Демпфирование (англ. Damping) относится к характеристике любой вибрационной системы при вибрации, вследствие внешних воздействий и/или внутренних причин самой системы амплитуда вибрации постепенно уменьшается, и количественная характеристика этой характеристики.
Ну, отрывисто и непонятно, понять не удалось. Однако в Интернете сказано, что этот эффект чаще встречается на iPhone, и его проще понять прямо на картинке:
Просто, то есть интерфейс скользящий.снизу или сверхувсе еще возможноПроведите пальцем на большее расстояние, чем фактический контентпотомотскокэластичный эффект. Как видно из эффекта, есть три ключевых момента:
- Проведите в самый верх или в самый низ, чтобы появилось.
- Это показывает, что расстояние скольжения больше, чем фактическое содержимое.Фактическая операция знает, что расстояние скольжения — это расстояние, на которое палец скользит по экрану.
- После отпускания руки возникает эффект отскока.
Теперь, когда вы знаете, что такое эффект демпфирования, давайте подумаем, как его реализовать. Для второго пункта мы можем прослушивать события touchstart, touchmove, touchend, аналогично принципу перетаскивания мышью:
- Когда touchstart, запишите начальную точку;
- touchmove вычисляет расстояние скольжения в режиме реального времени.
- При касании конечное расстояние скольжения можно получить и сравнить с установленным порогом. Войдите в стадию автоматического управления страницей: если она больше порога, пусть страница перейдет на следующую страницу, а если меньше порога, она вернется в исходное положение.
В процессе своей реализации я подумал о двух вариантах.
-
использовать js Общая идея заключается в том, что, отслеживая событие колеса прокрутки, определяется, что страница была пролистнута вниз (то же самое верно и вверху), и вычисляется расстояние скольжения пальца по странице. событие срабатывает, добавьте padding-bottom к демпфирующей полосе ниже, заставляя страницу следовать Иллюзия пальца, скользящего на дополнительное расстояние. Недостатки: использование js для создания анимации более требовательно к производительности.
-
использовать css Во второй схеме используется анимация CSS, и страница скользит на большее расстояние.На самом деле, также возможно перевести страницу на расстояние в направлении скольжения пальца.В это время, пока цвет фона страницы страница такая же, тот же эффект может быть достигнут. Поскольку translate может инициировать аппаратное ускорение браузера, производительность может быть гарантирована.
То, что можно сделать с помощью css, никогда не должно решаться с помощью js.
Однако при реализации второго решения была обнаружена проблема: если мы достигнем дна после скольжения на определенное расстояние, а затем соскользнем обратно, не отпуская, появится ошибка.
Я оцениваю, достигнуто ли дно, отслеживая положение полосы прокрутки.
$(document).scroll(() => {
isBottom = document.scrollTop() >= $(document).height() - $(window).height();
});
Из-за процесса скольжения назад полоса прокрутки также скользит вверх, что приводит к ошибке isBottom и багу.
Перерыл много информации в интернете, но идеального решения не нашел, зато нашел мобильный плагин:Swiper, это плагин с эффектом скольжения, созданный на чистом javascript и ориентированный на мобильные терминалы, такие как мобильные телефоны и планшетные компьютеры. Этот плагин также реализует эффект демпфирования. Просматривая его исходный код, обнаруживается, что Swiper также использует метод перевода для перемещения страницы вверх на некоторое расстояние, но полоса прокрутки реализована сама по себе, то есть путем установки переполнения внешнего контейнера: скрытого для отключения родную полосу прокрутки и повторно внедрить ее самостоятельно. Причина очень проста, мы можем транслировать страницу через событие касания, а также можем транслировать полосу прокрутки, чтобы мы могли контролировать себя.
Найдите решение, следуйте идее Swiper (но опустите кодовую реализацию части полосы прокрутки, то есть страница не имеет полосы прокрутки) и примерно добейтесь эффекта демпфирования.
Подробный код см.мой гитхаб. Который использует webpack для упаковки и компиляции.