快捷導(dǎo)航

實(shí)現(xiàn)div內(nèi)部滾動(dòng)條滾動(dòng)到底部和頂部的代碼

更新時(shí)間：2017年11月15日 09:21:19 作者：chaofei_liang

下面筆者就為大家分享一篇實(shí)現(xiàn)div內(nèi)部滾動(dòng)條滾動(dòng)到底部和頂部的代碼，代碼簡潔，具有很好的參考價(jià)值，希望對(duì)大家有所幫助

實(shí)例如下所示：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.scrolldiv{
			width: 500px;
			height: 400px;
			margin: 10px auto;
			background: #f00;
			overflow-y: scroll;
			padding: 10px;
		}
	</style>
</head>
<body>
<div class="scrolldiv" id="testDiv">
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<script type="text/javascript">
	var divscroll=document.getElementById('testDiv');
	function divScroll(){
		var scrollTop=divscroll.scrollTop;//頁面上卷的高度
		var wholeHeight=divscroll.scrollHeight;//頁面底部到頂部的距離
		var divHeight=divscroll.clientHeight;//頁面可視區(qū)域的高度
		if(scrollTop+divHeight>=wholeHeight){
			alert('我到底部了');
		}
		if(scrollTop==0){
			alert('我到頂部了')；
		}
	}
	divscroll.onscroll=divScroll;
</script>
</body>
</html>

以上這篇實(shí)現(xiàn)div內(nèi)部滾動(dòng)條滾動(dòng)到底部和頂部的代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

js中Math之random,round,ceil,floor的用法總結(jié)
本篇文章是對(duì)js中Math之random,round,ceil,floor的用法進(jìn)行了總結(jié)介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-12-12
微信小程序中的生命周期與生命周期函數(shù)淺析介紹
這篇文章主要介紹了微信小程序中的生命周期與生命周期函數(shù)的介紹，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
IE8提示Invalid procedure call or argument 異常的解決方法
某臺(tái)機(jī)器上，訪問公司的好幾個(gè)產(chǎn)品網(wǎng)站，都拋出很多 Invalid procedure call or argument ，跟進(jìn)了下，情況最后簡化為
2012-09-09
js 時(shí)間函數(shù)應(yīng)用加、減、比較、格式轉(zhuǎn)換的示例代碼
時(shí)間函數(shù)應(yīng)用加、減、比較、格式轉(zhuǎn)換等等，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
2013-08-08
js prototype和__proto__的關(guān)系是什么
這篇文章主要介紹了js prototype和__proto__的關(guān)系是什么，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
Web?Woker使用常見問題匯總及方案解決分析
這篇文章主要為大家介紹了Web?Woker常見使用問題及方案解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-09-09
JS HTML圖片顯示Canvas 壓縮功能
最新需要js 文件壓縮圖片上傳以前沒搞過，新手把學(xué)習(xí)過程分享，對(duì)JS HTML圖片顯示Canvas 壓縮功能感興趣的朋友一起看看吧
2017-07-07
wx-charts 微信小程序圖表插件的具體使用
這篇文章主要介紹了wx-charts 微信小程序圖表插件的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
javascript學(xué)習(xí)筆記--數(shù)字格式類型
很多人也許只知道 123，123.456，0xff 之類的數(shù)字格式。其實(shí) js 格式還有很多數(shù)字格式類型，比如 1., .1 這樣的，也有 .1e2 這樣的。
2014-05-05
JavaScript實(shí)現(xiàn)鼠標(biāo)控制自由移動(dòng)的窗口
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)控制自由移動(dòng)的窗口，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06