jQuery 中 scrollTop;原生的js怎么写

你好，我先需要明确一下你是要问jQuery中scrollTop获取滚动条距顶端的距离，还是要使用scrollTop来设置滚动条距顶端的距离，或者说需要二者兼备。

1、如果是获取，原生js实现很容易：

var div = documentgetElementById('wgt-ask'),

    scrollTop = divscrollTop;

consolelog(scrollTop); // 100

前提是div已经具备滚动条，不然使用为0

2、如果是设置，原生js也很简单：

var div = documentgetElementById('wgt-ask');

divscrollTop = 100;

依然前提是div已经具备滚动条，否则设置无效

3、如果是二者兼备，这里就要简单的封装一下了：

function scrollTop(obj, len){

    if (typeof len === 'undefined') {

        return objscrollTop;

    } else {

        objscrollTop = len;

    }

}

var div = documentgetElementById("wgt-user");

scrollTop(div, 100); // 设置

var st = scrollTop(div); // 100 获取

希望是你想要的结果，如有疑问欢迎追问，望采纳~

当有垂直方向的滚动条的时候，获取的数据才是正确的。

scrollHeight 获取的是整个页面的高度，包括页面看不到的部分

scrollTop 是被滑动到看不到的部分到视图顶部的距离

clientHeight 是显示在页面上的高度（整个不需要有垂直滚动条，每个元素都可以获取到这个数据，当没有滚动条的时候获取的是元素的高度）

借用知乎网友的一张图

scrollTop/scrollLeft 两个属性是唯一 可读写 的属性

滚动条卷去（隐藏）的高度

boxscrollTop=0 让容器直接回到顶部

0是最小值，若设置负值，以0算。例如： boxscrollTop=-100 再次获取值也会变成0

真实高度-当前容器一屏的高度

maxScrollTop = boxscrollHeight - boxclientHeight

var scrollTop = documentdocumentElementscrollTop || windowpageYOffset || documentbodyscrollTop;

我给楼主说一下思路吧

如果是瀑布流加载，首先要全局监听scroll事件，当页面滚动的时候，获取页面的scrollTop值，当scrollTop的值达到某个定值的时候时候异步去请求后端，请求到的数据在append的页面里就可以了。

如果像慕课网那样的动画，可以考虑用fullpage插件，到滚动到每一个位置的时候调用一个事件函数执行动画

现今的 chrome 浏览器，为了实现丝滑顺畅地滑动，活动时间直接执行而不再检测默认事件，这使得无法用 epreventDafult() 来阻止默认事件。

现在需要添加 {passive: false} 配置

$(document)addEventListener( 'scroll', fun, {passive: false} ) 把事件被动监听设置为 false 之后，就可以正常阻止默认事件了。

为了手动地使页面平滑滚动到某个高度，需要使用 $animate({scrollTop: val}) 。由于不同浏览器间的差异，绑定 scrollTop 的 DOM 元素是不一样的，比如

为了解决这个差异，我们需要把 animate 同时绑定在两个节点上。 $('html, body')animate()

$()position() ———— 基于父元素，从自身的外边框为点。

$()offset() ———— 基于父元素，从自身内容为点。

$(window)height()width() ———— 获取窗口宽高。

因为使用的是监听 touchstar 和 touchend 方法，所以该方法只适用于移动端。

主要的思路就是监听“触摸开始”和“触摸结束”两个事件，分别获取事件当前的触摸点坐标和文档滚动的值，进行对比判断“触摸是否有滑动”以及“文档是否有滚动（到底）”，来执行需要的方法。下面说说几个注意点：

以上就是关于jQuery 中 scrollTop;原生的js怎么写全部的内容，包括:jQuery 中 scrollTop;原生的js怎么写、scroll属性使用、浏览器滚动条卷去的高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！