快捷導(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ǎn)潔，具有很好的參考價(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;//頁(yè)面上卷的高度
		var wholeHeight=divscroll.scrollHeight;//頁(yè)面底部到頂部的距離
		var divHeight=divscroll.clientHeight;//頁(yè)面可視區(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)到底部和頂部的代碼就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript 事件代理需要注意的地方
這篇文章主要介紹了JavaScript 事件代理需要注意的地方，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下
2020-09-09
ECharts數(shù)據(jù)可視化基本使用之常用圖表類(lèi)型
這篇文章主要給大家介紹了關(guān)于ECharts數(shù)據(jù)可視化基本使用之常用圖表類(lèi)型的相關(guān)資料,echarts是一款基于JavaScript的數(shù)據(jù)可視化圖表庫(kù),提供直觀,生動(dòng),可交互,可個(gè)性化定制的數(shù)據(jù)可視化圖表,需要的朋友可以參考下
2023-11-11
簡(jiǎn)單實(shí)現(xiàn)js頁(yè)面切換功能
這篇文章主要為大家詳細(xì)介紹了如何實(shí)現(xiàn)js頁(yè)面切換功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-07-07
高性能JavaScript循環(huán)語(yǔ)句和條件語(yǔ)句
這篇文章主要為大家介紹了高性能JavaScript循環(huán)語(yǔ)句和條件語(yǔ)句，感興趣的小伙伴們可以參考一下
2016-01-01
如何計(jì)算Web動(dòng)畫(huà)幀率FPS
我們知道，動(dòng)畫(huà)其實(shí)是由一幀一幀的圖像構(gòu)成的。有Web動(dòng)畫(huà)那么就會(huì)存在該動(dòng)畫(huà)在播放運(yùn)行時(shí)的幀率。而幀率在不同設(shè)備不同情況下又是不一樣的。有的時(shí)候，一些復(fù)雜或者重要?jiǎng)赢?huà)，需要實(shí)時(shí)監(jiān)控它們的幀率，從而更好的優(yōu)化它們，本文就是介紹Web動(dòng)畫(huà)幀率（FPS）計(jì)算方法。
2021-05-05
JavaScript實(shí)現(xiàn)構(gòu)造json數(shù)組的方法分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)構(gòu)造json數(shù)組的方法,結(jié)合實(shí)例形式對(duì)比分析了javascript構(gòu)造json數(shù)組的實(shí)現(xiàn)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2018-08-08
JavaScript中變量提升和函數(shù)提升實(shí)例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中變量提升和函數(shù)提升的相關(guān)資料,以及JS變量提升和函數(shù)提升的順序,文中給出了詳細(xì)的介紹,需要的朋友可以參考下
2021-07-07
openLayer4實(shí)現(xiàn)動(dòng)態(tài)改變標(biāo)注圖標(biāo)
這篇文章主要為大家詳細(xì)介紹了openLayer4實(shí)現(xiàn)動(dòng)態(tài)改變標(biāo)注圖標(biāo)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08
js下拉選擇框與輸入框聯(lián)動(dòng)實(shí)現(xiàn)添加選中值到輸入框的方法
這篇文章主要介紹了js下拉選擇框與輸入框聯(lián)動(dòng)實(shí)現(xiàn)添加選中值到輸入框的方法,涉及javascript中onchange事件及頁(yè)面元素遍歷的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
Javascript技術(shù)難點(diǎn)之a(chǎn)pply，call與this之間的銜接
這篇文章主要介紹了Javascript技術(shù)難點(diǎn)之a(chǎn)pply，call與this之間的銜接的相關(guān)資料,需要的朋友可以參考下
2015-12-12