js鼠标滚动网页滚动_如何在网页上滚动

js鼠标滚动网页滚动

Scrolling a page to see the content below the fold is probably the most common event happening on a page, more than clicks or keyboard events.

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

You can listen for the scroll event on the window object to get information every time the user scrolls the page:

您可以在每次用户滚动页面时侦听window对象上的scroll事件以获取信息：

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

Inside the event handler you can check the current vertical scrolling position by checking the window property window.scrollY, and the horizontal scolling using window.scrollX.

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

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

Keep in mind that scroll event is not a one-time thing.

请记住， scroll事件不是一次性的事情。

It fires a lot of times during scrolling, not just at the end or beginning of the scrolling, so there’s a problem if you need to do any kind of operation.

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

You shouldn’t do any computation or manipulation in the handler event handler directly, but we should use throttling instead.

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

节流 (Throttling)

The scroll event is not fired one-time per event, but rather they continuously call their event handler function during all the duration of the action.

scroll事件不会在每个事件中一次性触发，而是在动作的所有持续时间内连续调用其事件处理函数。

This is because it provide coordinates so you can track what’s happening.

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

If you perform a complex operation in the event handler, you will affect the performance and cause a sluggish experience to your site users.

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

Libraries that provide throttling like Lodash implement it in 100+ lines of code, to handle every possible use case. A simple and easy to understand implementation is this, which uses setTimeout to cache the scroll event every 100ms:

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

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

Throttling also applies to the mousemove event we saw in the mouse events lesson. Same thing - that event is fired multiple times as you move the mouse.

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

Here’s an example on Codepen:

这是Codepen上的示例：

See the Pen Scrolling Events by Flavio Copes (@flaviocopes) on CodePen.

见笔滚动事件由弗拉维奥·科佩斯( @flaviocopes上) CodePen 。

如何获取元素的滚动位置 (How to get the scroll position of an element)

When you are building a user interface in the browser, you might have an element which can be scrolled, and it’s a common need to know the horizontal and vertical scrolling it currently has.

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

How can you do that?

你该怎么做？

Once you have the element, you can inspect its scrollLeft and scrollTop properties.

拥有元素后，就可以检查其scrollLeft和scrollTop属性。

The 0, 0 position is always found in the top left corner, so any scrolling is relative to that.

总是在左上角找到0, 0位置，因此任何滚动都与之相对。

Example:

例：

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

Those properties are read/write, so you can also set the scroll position:

这些属性是可读写的，因此您还可以设置滚动位置：

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

翻译自: https://flaviocopes.com/scrolling/

js鼠标滚动网页滚动