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