首頁 > web前端 > 前端問答 > jquery怎麼修改捲軸位置

jquery怎麼修改捲軸位置

青灯夜游
發布: 2022-06-08 17:13:16
原創
5023 人瀏覽過

修改方法:1、用scrollLeft(),可設定水平捲軸的位置,語法「$("滾動條元素").scrollLeft(位置值)」;2、用scrollTop(),可設定垂直捲軸位置,語法「$("捲軸元素").scrollTop(位置值)」。

jquery怎麼修改捲軸位置

本教學操作環境:windows7系統、jquery3.2.1版本、Dell G3電腦。

jquery提供了兩種方法可直接修改捲軸位置

  • scrollLeft()

  • scrollTop() 

1、使用scrollLeft()

#scrollLeft() 可以設定匹配元素相對捲軸左側的偏移,即水平捲軸的位置。

滾動條的水平位置指的是從其左側滾動過的像素數。當捲軸位於最左側時,位置是 0。

範例:

<!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>
登入後複製

jquery怎麼修改捲軸位置

#2、使用scrollTop() 

scrollTop()可設定匹配元素相對捲軸頂部的偏移,即垂直捲軸的位置。

範例:

<!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>
登入後複製

jquery怎麼修改捲軸位置

【推薦學習:jQuery影片教學web前端影片

以上是jquery怎麼修改捲軸位置的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板