資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會科學
時裝研究
法律研究如何使用 jQuery 查詢水平滾動容器中元素的左側位置？
要使用 jQuery 查詢水平滾動容器中元素的左側位置，請結合使用 animate() 函式和 scrollLeft() 函式。
示例
你可以嘗試執行以下程式碼學習如何查詢水平滾動容器中元素的左側位置
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var scrollArea = $('#box');
var toScroll = $('#box .myclass');
function myScroll() {
toScroll.each(function() {
var self = $(this);
$(this).css('cursor', 'pointer');
$(this).on('click', function () {
var leftOffset = self.offset().left - scrollArea.offset().left + scrollArea.scrollLeft();
scrollArea.animate({ scrollLeft: leftOffset });
alert(leftOffset);
});
});
};
myScroll();
});
</script>
<style>
#box {
width: 250px;
height: 300px;
margin-left: 20px;
border: 1px solid black;
overflow-x: scroll;
white-space: nowrap;
}
.myclass {
width: 250px;
height: 100px;
margin: 35px;
display: inline-block;
background: -webkit-linear-gradient(left, red , blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(to right, red , blue);
}
</style>
</head>
<body>
<p>Get left position of element.</p>
<div id="box">
<div class="myclass">First (Click Me)</div>
<div class="myclass">Second (Click Me)</div>
<div class="myclass">Third (Click Me)</div>
</div>
</body>
</html>
更新時間：2019-12-10
2 千+ 次瀏覽
廣告