ホームページ > 記事 > ウェブフロントエンド > div内のスクロールバーを上下にスクロールする機能の実装
div内のスクロールバーを上下にスクロールする機能の実装
- 小云云オリジナル
- 2017-12-21 09:31:563886ブラウズ
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('testp');
function pScroll(){
var scrollTop=pscroll.scrollTop;//页面上卷的高度
var wholeHeight=pscroll.scrollHeight;//页面底部到顶部的距离
var pHeight=pscroll.clientHeight;//页面可视区域的高度
if(scrollTop+pHeight>=wholeHeight){
alert('我到底部了');
}
if(scrollTop==0){
alert('我到顶部了')；
}
}
pscroll.onscroll=pScroll;
</script>
</body>
</html>皆さんは学びましたか？考え方は同じなので、急いで試してみてください。
関連する推奨事項:
スクロールバーの位置判断_JavaScriptスキルに基づく簡単な例
以上がdiv内のスクロールバーを上下にスクロールする機能の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。