Rumah > hujung hadapan web > tutorial js > div内部滚动条滚动到底部和顶部功能的实现

div内部滚动条滚动到底部和顶部功能的实现

小云云
Lepaskan: 2017-12-21 09:31:56
asal
3957 orang telah melayarinya

关于div内部滚动条滚动到底部和顶部功能的实现,本文就为大家分享一篇实现p内部滚动条滚动到底部和顶部的代码,代码简洁,具有很好的参考价值,希望能帮助到大家。

实例如下所示:


<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.scrollp{
			width: 500px;
			height: 400px;
			margin: 10px auto;
			background: #f00;
			overflow-y: scroll;
			padding: 10px;
		}
	</style>
</head>
<body>
<p class="scrollp" id="testp">
	<br><br><br><br><br><br><br><br><br><br><br>
<script type="text/javascript">
	var pscroll=document.getElementById(&#39;testp&#39;);
	function pScroll(){
		var scrollTop=pscroll.scrollTop;//页面上卷的高度
		var wholeHeight=pscroll.scrollHeight;//页面底部到顶部的距离
		var pHeight=pscroll.clientHeight;//页面可视区域的高度
		if(scrollTop+pHeight>=wholeHeight){
			alert(&#39;我到底部了&#39;);
		}
		if(scrollTop==0){
			alert(&#39;我到顶部了&#39;);
		}
	}
	pscroll.onscroll=pScroll;
</script>
</body>
</html>
Salin selepas log masuk

大家学会了吗?思路都是一样的赶紧动手尝试一下吧。

相关推荐:

基于滚动条位置判断的简单实例_javascript技巧

设置DIV滚动条属性与样式的方式介绍

javaScript滚动条事件的实例详解

Atas ialah kandungan terperinci div内部滚动条滚动到底部和顶部功能的实现. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan