Bagaimana untuk mengubah suai kedudukan bar skrol dalam jquery-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk mengubah suai kedudukan bar skrol dalam jquery

青灯夜游

Lepaskan： 2022-06-08 17:13:16

asal

5010 orang telah melayarinya

Kaedah pengubahsuaian: 1. Gunakan scrollLeft() untuk menetapkan kedudukan bar skrol mendatar, sintaksnya ialah "$("elemen bar skrol").scrollLeft(nilai kedudukan)" 2. Gunakan scrollTop( ) untuk menetapkan kedudukan bar skrol mendatar Tetapkan kedudukan bar skrol menegak, sintaks ialah "$("elemen bar skrol").scrollTop(nilai kedudukan)".

Bagaimana untuk mengubah suai kedudukan bar skrol dalam jquery

Persekitaran pengendalian tutorial ini: sistem windows7, versi jquery3.2.1, komputer Dell G3.

jquery menyediakan dua kaedah untuk mengubah suai terus kedudukan bar skrol

scrollLeft()
scrollTop()

1. Gunakan scrollLeft()

scrollLeft() untuk menetapkan offset elemen padanan berbanding sebelah kiri bar skrol, iaitu , kedudukan bar skrol mendatar.

Kedudukan mendatar bar skrol merujuk kepada bilangan piksel yang ditatal dari sebelah kirinya. Apabila bar skrol berada di hujung kiri, kedudukannya ialah 0.

Contoh:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("div").scrollLeft(100);
				});
			});
		</script>
	</head>
	<body>

		<div style="border:1px solid black;width:100px;height:130px;overflow:auto">
			The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
		</div><br>
		<button>水平滚动条的位置设置为100 px</button>

	</body>
</html>

Salin selepas log masuk

Bagaimana untuk mengubah suai kedudukan bar skrol dalam jquery

2. Gunakan scrollTop()

scrollTop() Anda boleh menetapkan offset elemen padanan berbanding bahagian atas bar skrol, iaitu, kedudukan bar skrol menegak.

Contoh:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("div").scrollTop(100);
				});
			});
		</script>
	</head>
	<body>

		<div style="border:1px solid black;width:100px;height:150px;overflow:auto">
			This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
			This is some text. This is some text. This is some text.
		</div><br>
		<button>垂直滚动条的位置设置为100px</button>

	</body>
</html>

Salin selepas log masuk

Bagaimana untuk mengubah suai kedudukan bar skrol dalam jquery

[Pembelajaran yang disyorkan: tutorial video jQuery, bahagian hadapan web video】

Atas ialah kandungan terperinci Bagaimana untuk mengubah suai kedudukan bar skrol dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!