js/jquery使滚动条提留在底部的方法

最新推荐文章于 2022-07-11 10:06:38 发布

六道木_

最新推荐文章于 2022-07-11 10:06:38 发布

阅读量729

点赞数

分类专栏： css/html 文章标签： html CSS

本文链接：https://blog.csdn.net/u013160932/article/details/44922185

版权

css/html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

如何实现？

不多说，直接上代码

<body style="margin: 0px;">
<pre name="code" class="html"><span style="white-space:pre">	</span><div id="dd" style="width:300px;height:100px;overflow: auto;border:1px solid;">
		<div style="height:400px;"></div>
	</div>

</body><script type="text/javascript">//var dd = document.getElementById('dd'); //dd.scrollTop = dd.scrollHeight;var dd = $('#dd')[0]; $('#dd').scrollTop(dd.scrollHeight);</script>

div会出现滚动条，在下面利用了两句代码(js和jquery的方式都可以 )就可以让滚动条一直停留在底部

scrollTop和scrollHeight的作用

在讲为什么之前先介绍下这种方法的原理(原理类似)

首先是scrollHeight是div里内容的高度，而scrollTop是当下拉滚动条的时候被隐藏的内容的高度(相对于滚动条在顶部时的状态)，看下下面的代码

<body style="margin: 0px;">
	<div id="dd" style="width:300px;height:100px;overflow: auto;border:1px solid;">
		<div style="height:400px;"></div>
	</div>
</body>
<script type="text/javascript">
	var dd = $('#dd')[0]; 
	console.info(dd.scrollHeight);<pre name="code" class="html"><span style="white-space:pre">	</span>console.info(dd.scrollTop);

</script>

这里div容器高度是100，而内容是400，所以scrollHeight得到的值是400
而scrollTop一开始在头部，所以，scrollTop值为0(此时div内部的内容并没有被隐藏)

解释

知道了这两个属性是什么之后就知道上面是怎么回事了

因为div中的内容区域是400，如果我们需要让滚动条停留在底部的话，那么这种状态下，div中被隐藏的高度为300，那么就是scrollTop=300(上面的代码scrollTop=scrollHeight(400)，只要大于scrollTop就行了，这样就不需要计算高度)

六道木_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js/jquery使滚动条提留在底部的方法

如何实现？不多说，直接上代码 //var dd = document.getElementById('dd'); //dd.scrollTop = dd.scrollHeight;var dd = $('#dd')[0]; $('#dd').scrollTop(dd.scrollHeight);div会出现滚动条，在下面利用了两句代码(js和jquery的方式都可以)
复制链接

扫一扫