Implementierung der Funktion zum Scrollen der Bildlaufleiste innerhalb eines Divs nach unten und oben-js-Tutorial-php.cn

Implementierung der Funktion zum Scrollen der Bildlaufleiste innerhalb eines Divs nach unten und oben

小云云

Freigeben： 2017-12-21 09:31:56

Original

3927 Leute haben es durchsucht

In Bezug auf die Implementierung der Funktion zum Scrollen der internen Bildlaufleiste von div nach unten und oben wird Ihnen in diesem Artikel ein Code zur Implementierung der internen Bildlaufleiste von p zum Scrollen nach unten und oben vorgestellt prägnant und hat einen guten Referenzwert.

Ein Beispiel ist wie folgt:

<!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>

Nach dem Login kopieren

Haben Sie es gelernt? Die Idee ist dieselbe, also beeilen Sie sich und probieren Sie es aus.

Verwandte Empfehlungen:

Ein einfaches Beispiel basierend auf der Beurteilung der Position der Bildlaufleiste_Javascript-Fähigkeiten

Legen Sie DIV-Bildlaufleistenattribute fest und Einführung zu Stilen

Detaillierte Beispiele für JavaScript-Bildlaufleistenereignisse

Das obige ist der detaillierte Inhalt vonImplementierung der Funktion zum Scrollen der Bildlaufleiste innerhalb eines Divs nach unten und oben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!