js鼠标滚动滚动网页滚动()(组图)

js鼠标滚动网页滚动

滚动页面以查看折叠下方的内容可能是页面上发生的最常见事件，而不是点击或键盘事件。

滚动页面以查看第一个屏幕下方的内容可能是页面上最常见的事件，而不是点击或键盘事件。

可以window对象上的scroll事件，获取用户每次滚动页面的信息：

可以window对象上的scroll事件来获取用户每次滚动页面的信息：

window.addEventListener(scroll, event => {
  // scroll event detected
})

在事件处理程序中，您可以通过检查窗口属性 window.scrollY 和使用 window.scrollX 的水平滚动来检查当前的垂直滚动位置。

在事件处理程序中，您可以通过检查窗口属性 window.scrollY 并使用 window.scrollX 绘制水平线来检查当前垂直滚动位置。

window.addEventListener(scroll, event => {
  console.log(window.scrollY)
  console.log(window.scrollX)
})

请记住，滚动事件不是一次性的。

记住，滚动事件不是一次性的。

它在滚动过程中触发了很多次，而不仅仅是在滚动结束或开始时，因此如果您需要进行任何类型的操作，就会出现问题。

在滚动过程中会被多次触发，不仅仅是在滚动结束或开始时，所以如果你需要执行任何一种操作，都会有问题。

您不应该直接在处理程序事件处理程序中进行任何计算或操作，但我们应该改用节流。

您不应直接在处理程序事件处理程序中执行任何计算或操作，而应使用限制。

节流（节流）

滚动事件不是每个事件触发一次，而是在整个操作期间持续调用其事件处理函数。

滚动事件不会在每个事件中一次触发，而是会在整个动作持续时间内不断调用其事件处理函数。

这是因为它提供了坐标，因此您可以跟踪正在发生的事情。

这是因为它提供了坐标，因此您可以跟踪正在发生的事情。

如果您在事件处理程序中执行复杂的操作，将会影响性能并导致您的网站用户体验缓慢。

如果在事件处理程序中进行复杂的操作，会影响性能，给网站用户带来缓慢的体验。

提供节流功能的库，例如在 100 多行代码中实现它，以处理所有可能的用例。一个简单易懂的实现是这样的，它用于每 100 毫秒缓存一次滚动事件：

提供节流功能的同一个库在 100 多行代码中实现了它，以处理所有可能的用例。这是一个简单易懂的实现，它每 100 毫秒缓存一次滚动事件：

let cached = null
window.addEventListener(scroll, event => {
  if (!cached) {
    setTimeout(() => {
      //you can access the original event at `cached`
      cached = null
    }, 100)
  }
  cached = event
})

限制也适用于我们在鼠标事件课程中看到的 mousemove 事件。同样的事情 - 当您移动鼠标时，该事件会被多次触发。

限制也适用于我们在鼠标事件课程中看到的 mousemove 事件。同样的事情——移动鼠标会多次触发事件。

以下是 Codepen 的示例：

这是一个关于 Codepen 的例子：

在 CodePen 上查看 Flavio Copes (@flaviocopes) 的钢笔滚动事件。

查看 Flavio Copes (@flaviocopes on) CodePen 的钢笔滚动事件。

如何获取一个元素的滚动位置（如何获取一个元素的滚动位置）

当您在浏览器中构建用户界面时，您可能有一个可以滚动的元素，并且通常需要知道它当前具有的水平和垂直滚动。

在浏览器中构建用户界面时，可能会有一个可滚动元素，您通常需要知道它当前具有的水平和垂直滚动。

你怎么能这样做？

你应该怎么做？

获得元素后，您可以检查其 scrollLeft 和 scrollTop 属性。

一旦你有了一个元素，你就可以检查它的 scrollLeft 和 scrollTop 属性。

0, 0 位置总是在左上角，所以任何滚动都是相对的。

总是在左上角找到 0, 0 位置，所以任何滚动都是相对于它的。

示例：

示例：

const container = document.querySelector(. container)
container.scrollTop
container.scrollLeft

那些属性是读/写的，所以你也可以设置滚动位置：

这些属性是可读可写的，所以你也可以设置滚动位置：

const container = document.querySelector(. container)
container.scrollTop = 1000
container.scrollLeft = 1000

翻译自：

js鼠标滚动网页滚动

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-380248-1.html