今天看jQuery的的scrollTop()这个API,发现一直都不是很理解,写了一下在这个过程中对于scrollTop()的理解。
问题:如何使用scrollTop(),以及如何获取和设置滚动的距离。
使用前提:jQuery的scrollTop()和DOM原生的scrollTop比较接近,它的使用前提在于:当一个元素(可以是整个body)的内容超出了元素本身的宽度或者高度,overflow:auto;时出现的滚动条;或者在整个document中,内容本身的高度超过了屏幕的高度出现了滚动条,scrollTop()这个jQuery API就能使用了。如果没有出现滚动条的话,用scrollTop()获取的高度会是0。
一个需要了解的点:在使用scrollTo()这个方法的时候,元素的选择是包含了滚动条的容器,这一点很重要,因为之前一直在这里犯错误。
举例:
<style>
body{
height:2000px;
}
</style>
<script>
$('body').on('click',function(){
let $top = $('body').scrollTop()
console.log($top)
})
</script>
这一串代码的意思就是说只要点击了body的部分,就会返回当前滚动条距离顶部的距离,这里的距离指的是,当前屏幕body的最上沿到最小方的距离,而且,如果没有滚动条的情况这个值就是0。
请特别注意scrollTop()前面的元素,是容器!!!!
$('button').on('click',function(){
$('body').scrollTop(0)
})
这就是这个API的另一种用法,是回到顶部的比较粗糙的写法。
网友评论