suchen

Heim  >  Artikel  >  Web-Frontend  >  Implementierung der Funktion zum Scrollen der Bildlaufleiste innerhalb eines Divs nach unten und oben

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

小云云
小云云Original
2017-12-21 09:31:563938Durchsuche

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detailliertes Beispiel für Js, die die Auf- und Ab-Gleitrichtung von H5 beurteilenNächster Artikel：Detailliertes Beispiel für Js, die die Auf- und Ab-Gleitrichtung von H5 beurteilen

In Verbindung stehende Artikel

Mehr sehen