div内のスクロールバーを上下にスクロールする機能の実装

小云云
リリース: 2017-12-21 09:31:56
オリジナル
3927 人が閲覧しました

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>
ログイン後にコピー

皆さんは学びましたか?考え方は同じなので、急いで試してみてください。

関連する推奨事項:

スクロールバーの位置判断_JavaScriptスキルに基づく簡単な例

DIVスクロールバーのプロパティとスタイルの設定方法の紹介

JavaScriptスクロールバーイベントの詳細な例

以上がdiv内のスクロールバーを上下にスクロールする機能の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!