Несколько вариантов плавной прокрутки вверх или вниз

внешний интерфейс

Начинать

В последнее время проект выполняет отображение списка связанных потребностей, требуя кнопок быстрого доступа для прокрутки вверх и вниз После обращения к некоторым статьям в сообществе я написал эту статью для вашего ознакомления!

Много раз используемый нами эффект прокрутки похож на якорную точку, которая мелькает и дает очень недружественный опыт. Итак, вот несколько способов плавной прокрутки.

Есть некоторые связанные точки знаний, вы можете обратиться к этой статье, если вы не понимаете:адрес ссылки

Начальный адрес

поведение прокрутки с использованием CSS

scroll-behavior: auto | smooth | inherit | unset

Как правило, мы можем использовать auto и smooth. Smooth означает, что прокрутка плавная и есть эффект перехода. Auto не имеет эффекта перехода и мигает.

Обычно мы возвращаемся к началу и устанавливаем этот атрибут в html. код показывает, как показано ниже

<div id="container" class="box">
  <p>Hello, Backtotop</p>
  <br/>
  <p>Hello, Backtotop</p>
  <br/>
  <p>Hello, Backtotop</p>
  <br/>
  <p>Hello, Backtotop</p>
  <br/>
  /* 省略部分代码 */
</div>
<a href="#container" class="backto-top-btn">回到顶部按钮</a>

код стиля css:

html {
  scroll-behavior: smooth;
}

Примечание. Метка a, которую я использовал выше для добавления идентификатора, может быть не очень хорошей, потому что поведение метки по умолчанию добавляет хэш к адресу, что вызовет проблемы для маршрутизации vue с использованием хэш-режима.

более простой способ

  • вернуться к вершине Поведение вышеуказанного тега по умолчанию будет проблематичным, мы можем использовать более простой способ добиться этого, сначала добавив стиль в html вашей страницы:
html {
  scroll-behavior: smooth;
}

Привяжите событие к вашей кнопке обратно наверх, например, событие клика, и добавьте код, который мы обычно используем, чтобы вернуться наверх

window.scrollTo(0, 0);

Затем, если ваше устройство и браузер поддерживают это свойство CSS, также будет эффект плавного перехода.

  • обратно вниз Возвращаясь к низу, мы можем сделать это, мы вычисляем высоту элемента DOM, вычитаем высоту нашего окна просмотра, тогда это дно.
window.scrollTo(0, document.documentElement.scrollHeight - window.innerHeight);

Поддержка устройств под рукой

  • iOS 13.3 Safari не поддерживает плавное
  • iOS 11.4.1 Safari не поддерживает плавное
  • Galaxy S9 Android 9.0 поставляется с браузером, поддерживающим плавное
  • Chrome 79 поддерживает гладкие

Element.scrollIntoView() с использованием JS

element.scrollIntoView(); // 等同于element.scrollIntoView(true) 
element.scrollIntoView(alignToTop); // Boolean型参数 
element.scrollIntoView(scrollIntoViewOptions); // Object型参数

Это функция прокрутки, которая поставляется с браузером, и в настоящее время это новая функция, которая может не поддерживаться многими устройствами и браузерами. Вот объяснение параметров MDN

Это ощущение проще в использовании, чем CSS, просто привяжите эту функцию к элементу DOM, который вы хотите прокручивать.

// 滚动到顶部
this.$refs.container.scrollIntoView(true); // vue的语法

// 滚动到底部
this.$refs.container.scrollIntoView(false);  // vue的语法

Поддержка устройств под рукой

  • iOS 13.3 Safari не поддерживает плавное
  • iOS 11.4.1 Safari не поддерживает плавное
  • Galaxy S9 Android 9.0 поставляется с браузером, поддерживающим плавное
  • Chrome 79 поддерживает гладкие

Схема буферизации для поддержки нескольких устройств

// 封装一个回到底部或者顶部的函数
scrollToTop(position) {
  // 使用requestAnimationFrame，如果没有则使用setTimeOut
  if(!window.requestAnimationFrame) {
    window.requestAnimationFrame = function(callback) {
      return setTimeout(callback, 20)
    }
  }

  // 获取当前元素滚动的距离
  let scrollTopDistance = document.documentElement.scrollTop || document.body.scrollTop;

  function smoothScroll() {
    // 如果你要滚到顶部，那么position传过来的就是0，下面这个distance肯定就是负值。
    let distance = position - scrollTopDistance;
    // 每次滚动的距离要不一样，制造一个缓冲效果
    scrollTopDistance = scrollTopDistance + distance / 5;
    // 判断条件
    if(Math.abs(distance) < 1) {
      window.scrollTo(0, position);
    }else {
      window.scrollTo(0, scrollTopDistance);
      requestAnimationFrame(smoothScroll);
    }
  }

  smoothScroll();
 }

вызвать эту функцию

// 回到顶部
scrollToTop(0);

// 滚到底部
scrollToTop(document.documentElement.scrollHeight - window.innerHeight);

Вот отображение эффекта

Поддержка устройств под рукой

  • Поддержка Safari iOS 13.3
  • Поддержка Safari iOS 11.4.1
  • Galaxy S9 Android 9.0 поставляется с поддержкой браузера
  • Поддержка Chrome 79

использованная литература

адрес ссылки

Спасибо за отличную статью выше!

Категории