简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

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

小云云
Lepaskan： 2017-12-21 09:31:56
asal
3927 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：
bawah 滚动 atas
sumber：php.cn
Artikel sebelumnya：实例详解Js判断H5上下滑动方向 Artikel seterusnya：详解js判断内容区域是否滚动到底部
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
Artikel terbaru oleh pengarang
Isu terkini
Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...
daripada 2024-04-06 21:58:04
0
1
800
Adakah terdapat cara untuk memaksa teks dalam flexbox dipusatkan secara menegak, tidak kira apa kod CSS lain yang kita ada? Saya mempunyai kod CSS berikut yang merupakan sebahagian daripada kod CSS yang lebih besar...
daripada 2024-04-06 20:41:51
0
1
518
Bagaimana untuk menyelesaikan ruang kosong misteri di bahagian bawah halaman dalam CSS Saya cuba membina halaman web mudah menggunakan Bootstrap dan D3, tetapi saya tidak tahu b...
daripada 2024-04-06 20:22:15
0
1
454
Kaedah peringkat atas untuk menggantikan rentetan dengan kod HTML (dihasilkan daripada tatasusunan) Diberi rentetan seperti ini...$htmlPattern="Usernameis:#name#andusercompanyis#company...
daripada 2024-04-06 17:40:41
0
2
410
Kemas kini status tidak berfungsi dalam React-Native pada Android Saya mempunyai beberapa kod yang mempunyai sepasang imej dalam galeri mendatar boleh leret...
daripada 2024-04-06 16:54:10
0
1
410
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！