Признание некоторого «прокручивающего» поведения браузеров

JavaScript
Признание некоторого «прокручивающего» поведения браузеров

В последнее время я был очень занят, на этот раз я нашел время, чтобы написать陶冶下情操,浏览器滚动Я действительно вижу вас каждый день. Например, эту статью, которую вы сейчас читаете, вам нужно прокрутить вниз, чтобы прочитать ее. В этой статье в основном говорится о滚动相关Некоторые из方法и属性, и несколько интересных примеров 🎈 статья посвящена方法或属性В конце статьи будет ссылка, по которой каждый сможет ознакомиться сам!

Классификация

По моему личному пониманию, точки прокатки全局滚动(浏览器窗口)и局部滚动(自定义的盒子), большая часть следующего относится к全局滚动,局部滚动получить指定的DOMпозвони снова相应的APIВот и все ✅

Как установить глобальную высоту полосы прокрутки

  1. Самый распространенный метод:
window.scrollTo(0, 0);

// or
window.scrollTo({
  left: 0,
  top: 100
});
  1. также доступны相对滚动настраивать:
window.scrollBy(0, 0);

// or
window.scrollBy({
  left: 0,
  top: 100
});
  1. или использоватьscrollTopнастраивать:
document.scrollingElement.scrollTop = 100;

Уведомление:scrollToиscrollByПараметры одинаковые, разница естьscrollByРасстояние прокрутки зависит от текущего положения полосы прокрутки для прокрутки ✅

Сравнение эффектов выглядит следующим образом:

Это понятно,前者заключается в том, чтобы установить высоту прокрутки на100,и后者увеличивается с каждым разом100, потому и называется相对滚动✅

Как указать элемент для отображения в окне просмотра

  1. Самый распространенный метод:
// 获取元素的offsetTop(元素距离文档顶部的距离)
let offsetTop = document.querySelector(".box").offsetTop;

// 设置滚动条的高度
window.scrollTo(0, offsetTop);

Эффект следующий:

  1. или с якорями:
<a href="#box">盒子出现在顶部</a>
<div id="box"></div>

Эффект следующий:

  1. или использоватьscrollIntoViewПоказывать:
document.querySelector(".box").scrollIntoView();

Эффект следующий:

Вы также можете указать, где появится элемент:

// start出现在视口顶部、center出现在视口中央、end出现在视口底部
document.querySelector(".box").scrollIntoView({
  block: "start" || "center" || "end"
});

Эффект следующий:

Как настроить прокрутку с эффектами плавного перехода

  1. используя каждый метод参数настраивать:
window.scrollTo({
  behavior: "smooth"
});

window.scrollBy({
  behavior: "smooth"
});

document.querySelector(".box").scrollIntoView({
  behavior: "smooth"
});

Эффект следующий:

  1. или использоватьcssНастройки свойства:
html {
  scroll-behavior: smooth; // 全局滚动具有平滑效果
}

// 或者所有
* {
 scroll-behavior: smooth;
}

Эффект следующий:

Примечание. После установки этого свойства все методы можно задать без установкиbehaviorпараметры, вы можете выбрать один из двух, потому что оба控制当前指定元素的滚动行为, так якорь прыгать, ставитьscrollTopтоже гладкая(smooth)из滚动行为✅

что-то интересное

1. scrollingElement

Объект может быть очень兼容приобрестиscrollTop,scrollHeightи другие свойства, в移动端иPC端Проверено и проверено 🤞

Помните, когда я писал этот метод совместимости:

let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

Теперь вам просто нужно:

let scrollHeight = document.scrollingElement.scrollHeight;

Так какMDNОн описывается таким образом:

Стандартный режим возвращаетсяdocumentElement, режим причуд возвращаетсяbody;

2. Прокрутите вниз

window.scrollTo({
  left: 0,
  top: document.scrollingElement.scrollHeight
});

// 如果你实在是懒的话...
window.scrollTo(0, 999999);

Примечание. Плавная прокрутка до顶部или底部Вы можете сами добавить параметры или атрибуты ✅

3. Определите, прокрутил ли браузер вниз

window.addEventListener("scroll", () => {
  let {
    scrollTop,
    scrollHeight,
    clientHeight
  } = document.scrollingElement;
  
  // 当前滚动高度 + 视口高度 >= 文档总高度
  if (scrollTop + clientHeight >= scrollHeight) {
    console.log("已到达底部");
  }
});

Эффект следующий:

регулирование функции

Когда вы не добавляете регулирование функции:

window.addEventListener("scroll", () => console.log("我在滚我在滚！"));

Эффект следующий:

После добавления функции дросселирования:

window.addEventListener("scroll", throttle(() => console.log("我在滚我在滚！")));

Эффект следующий:

throttleИсходный код:

function throttle(fn, interval = 500) {
  let run = true;

  return function () {
    if (!run) return;
    run = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      run = true;
    }, interval);
  };
}

Полезно: уменьшите частоту выполнения кода ✅

Функция защиты от тряски

При добавлении функции анти-встряски:

window.addEventListener("scroll", debounce(() => console.log("滚动结束！")));

Эффект следующий:

debounceИсходный код:

function debounce(fn, interval = 500) {
  let timeout = null;

  return function () {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      fn.apply(this, arguments);
    }, interval);
  };
}

Использование: судить о动作结束, например, конец прокрутки только что, конец ввода ввода и т. д. ✅

Решите проблему, что частичная прокрутка устройств IOS не плавная (липкие руки)

Помимо встроенной прокрутки в браузере,自定义的滚动条Эта ситуация будет иметь место, и для ее решения можно добавить следующие свойства:

.box {
  -webkit-overflow-scrolling: touch;
}

Сравнение выглядит следующим образом:

Примечание. Вам нужна настоящая машина, чтобы увидеть эффект, здесь имеется в виду局部滚动Относится к自己定义的盒子, затем установитеoverflow: auto || scroll;поведение прокрутки после;

скользящий спред

означает несколько滚动区域, когда滚动区域После прокрутки продолжить прокрутку будет传播到Поведение для продолжения прокрутки к родительской области:

.box {
  overscroll-behavior: contain; // 阻止滚动传播
}

График сравнительного эффекта выглядит следующим образом:

Горизонтальная прокрутка

移动端Для этого есть много потребностей, и это часто используется для отображения изображений:

<ul>
  <li>
    <img src="">
  </li>
  // ...
</ul>

ul {
  white-space: nowrap; // 超出不换行
  overflow-x: auto;

  li {
    display: inline-block;

    img {
      display: block;
      width: 200px;
    }
  }
}

Эффект следующий:

После прокрутки принудительно прокрутите до указанного элемента

На основе приведенного выше примера мы устанавливаем следующие свойства:

ul {
  scroll-snap-type: x mandatory;
  
  li {
    scroll-snap-align: start;
  }
}

Эффект следующий:

Если вы посмотрите внимательно, вы обнаружите, что когда мы отпускаем, мы最近的元素Прокрутите вправо (исходное положение, вверху для оси Y, справа для оси X)

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

li {
  scroll-snap-align: center;
}

Эффект следующий:

Таким образом, простой轮播图Эффект есть!

Также возможна полноэкранная прокрутка:

Примечание: это свойство будет в вашем滚动完сделать обработку позже, а значит можно图片1прыгать, чтобы图片9✅

Наконец

упомянутый выше方法或属性Документация выглядит следующим образом:

  1. scrollTo
  2. scrollBy
  3. scrollIntoView
  4. scrollingElement
  5. scroll-behavior
  6. -webkit-overflow-scrolling
  7. overscroll-behavior
  8. scroll-snap-type
  9. scroll-snap-align

Если вы считаете, что эта статья хороша, пожалуйста, не забудьте нажать赞и关注О~😊

связанное предложение

Используйте маленькое приложение «Cross Observer», чтобы легко выполнять ленивую загрузку, всасывание сверху и опускание ❗

Категории