我试图用JavaScript检测浏览器滚动条的位置,以确定当前视图在页面中的位置。

我的猜测是,我必须检测拇指在轨道上的位置,然后是拇指的高度占轨道总高度的百分比。是我过于复杂了,还是JavaScript提供了一个更简单的解决方案?代码会是什么样子?


当前回答

document.getScroll = function() {
    if (window.pageYOffset != undefined) {
        return [pageXOffset, pageYOffset];
    } else {
        var sx, sy, d = document,
            r = d.documentElement,
            b = d.body;
        sx = r.scrollLeft || b.scrollLeft || 0;
        sy = r.scrollTop || b.scrollTop || 0;
        return [sx, sy];
    }
}

返回一个包含两个整数的数组- [scrollLeft, scrollTop]

其他回答

是这样的:)

window.addEventListener("scroll", (event) => {
    let scroll = this.scrollY;
    console.log(scroll)
});

这是另一种获取滚动位置的方法:

const getScrollPosition = (el = window) => ({
  x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
  y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});

如果你正在使用jQuery,这里有一个完美的函数:.scrollTop()

doc在这里-> http://api.jquery.com/scrollTop/

注意:你可以使用这个函数来检索或设置位置。

参见:http://api.jquery.com/?s=scroll

片段

窗口接口的只读scrollY属性返回 文档当前垂直滚动的像素数。

窗口。addEventListener(“滚动”,函数(){console.log (this.scrollY)}) html{高度:5000 px}

更短的版本使用匿名箭头函数(ES6)并避免使用此功能

窗口。addEventListener(“scroll”,)=>控制台。 html{高地:5000px}

我认为下面的函数可以帮助获得滚动坐标值:

const getScrollCoordinate = (el = window) => ({
  x: el.pageXOffset || el.scrollLeft,
  y: el.pageYOffset || el.scrollTop,
});

我从这个答案中得到了这个想法,只是做了一点改变。