js怎样获取元素滚动的距离

ゝ一世哀愁。 2023-06-11 03:30 55阅读 0赞

<!DOCTYPE html>
    <html lang="zh">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<meta http-equiv="X-UA-Compatible" content="ie=edge">
    	<title></title>
    	<style>
    		.box{
    			width: 500px;
    			height: 100px;
    			background: gray;
    			overflow: auto;
    		}
    		.item{
    			height: 50px;
    		}
    	</style>
    </head>
    <body>
    	<div class="box" id="c">
    		<ul>
    			<li class="item"></li>
    			<li class="item"></li>
    			<li class="item"></li>
    			<li class="item"></li>
    			<li class="item"></li>
    			<li class="item"></li>
    			<li class="item"></li>
    			<li class="item"></li>
    			<li class="item"></li>
    			<li class="item"></li>
    			<li class="item"></li>
    			<li class="item"></li>
    			<li class="item"></li>
    			<li class="item"></li>
    			<li class="item"></li>
    			<li class="item"></li>
    			<li class="item"></li>
    			<li class="item"></li>
    			<li class="item"></li>
    			<li class="item"></li>
    		</ul>
    	</div>
    </body>
    </html>
    <script type="text/javascript">
    	var dom = document.getElementById('c');
    	dom.addEventListener('scroll',function () {
    		console.log('', dom.scrollTop);
    	});
    </script>

## 某些时候需要判断页面是否滚动到顶部，这样就需要通过调用scrollTop即可获取，前提是元素必须溢出产生出滚动条哦 ##

发表评论取消回复

表情：

评论列表（有 0 条评论，55人围观）

还没有评论，来说两句吧...

相关阅读

相关 js怎样获取元素有哪些类 class 原生js获取元素的类名

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <...

布满荆棘的人生/ 2024年04月19日 11:59/ 0 赞/ 152 阅读

相关 WebAPI-通过window对象的属性获取页面滚动的距离

`pageXOffset` 与 `pageYOffset` 用于获取页面的水平和垂直的滚动距离，通过这两种属性获取的值均为数字类型没有单位。 pageXOffset `

我会带着你远行/ 2023年06月20日 06:14/ 0 赞/ 43 阅读

相关 js怎样获取元素滚动的距离

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <me

ゝ一世哀愁。/ 2023年06月11日 03:30/ 0 赞/ 56 阅读

相关 js怎样获取元素节点怎样获取某个元素下的第一个节点获取相邻的兄弟节点

有时候不需要使用jquery，而如果需要用原生js获取节点就比较麻烦了以下是一些比较常用的api，记录一下。不一定兼容ie <!DOCTYPE h

╰半夏微凉°/ 2023年06月06日 12:11/ 0 赞/ 70 阅读

相关简易实现上拉加载操作（vue滚动条事件 - 获取滚动条距离底部距离）

通过获取到滚动条距离底部的距离，可以实现上拉加载操作有滚动条，div一定要设固定高度，然后overflow: auto出现滚动条 <div @scroll.pa

落日映苍穹つ/ 2023年02月25日 08:39/ 0 赞/ 91 阅读

相关 react 获取滚动条距离顶部的数值

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>React

刺骨的言语ヽ痛彻心扉/ 2023年02月18日 08:20/ 0 赞/ 105 阅读

相关 jquery动态获取两个元素之间的距离

垂直距离 $("div2").offset().top - ($("div1").offset().top + $("div1").height()) 水平距离

红太狼/ 2022年12月11日 05:21/ 0 赞/ 282 阅读

相关 js获取滚动条距离浏览器顶部,底部的高度

做web开发经常会碰到需要获取[浏览器][Link 1]的滚动条与顶部和底部的距离，然后做相应的处理动作。下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一

素颜马尾好姑娘i/ 2022年07月16日 02:12/ 0 赞/ 432 阅读

相关 vue怎样操作元素怎样获取元素节点

vue中建议我们操作节点的时候使用ref来获取节点，所以虽然可以用document.getElement之类的语句来操作，不过代码还是有点长，所以我们可以使用vue提供的ap

淩亂°似流年/ 2021年12月09日 18:13/ 0 赞/ 693 阅读

相关获取滚动条scrollTop距离总是为0

js监听滚动条事件的时候，能够监听成功，奈何获取scrollTop 的时候总是为0，自己在控制台断点调试后发现还是一直未0，能获取到，就是这个距离是为0，检查语句和HTML还是

朱雀/ 2021年12月05日 02:07/ 0 赞/ 507 阅读