.scrollLeft()

Định nghĩa và sử dụng

  • .scrollLeft(): Lấy vị trí hiện tại theo chiều ngang của thanh cuộn cho các thành phần đầu tiên trong một bộ các thành phần phù hợp hoặc thiết lập vị trí ngang của thanh cuộn cho mỗi thành phần phù hợp.
  • Giá trị của vị trí được tính theo số nguyên.

Cấu trúc

  • Đã được thêm vào từ phiên bản 1.2.6

.scrollLeft()

$('.target').scrollLeft();

.scrollLeft(Giá trị)

Thiết lập vị trí hiện tại theo chiều ngang của thanh cuộn

$('.target').scrollLeft(250);

.scrollLeft()

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
p {
    border:1px solid blue;
}
</style>
<script>
$(function(){
    var scrollL = $('.test').scrollLeft();
	$('p:last').text("scrollLeft:" + scrollL);
});
</script>
</head>

<body>
<p>p 01</p>
<p class="test">p 02</p>
<p></p>
</body>
</html>

Hiển thị trình duyệt:

Ta thấy thành phần p đã được chèn vào thành phần div, ngay vị trí cuối cùng.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<p>p 01</p>
<p class="test">p 02</p>
<p></p>

<p>p 01</p>
<p class="test">p 02</p>
<p>scrollLeft: 0</p>

.scrollLeft(Giá trị)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
div {
    border:1px solid blue;
    height:100px;
    width:200px;
    overflow:auto;
}
p {
    height:500px;
	width:1000px;
}
</style>
<script>
$(function(){
    $('div').scrollLeft(600);
});
</script>
</head>

<body>
<div>
<p>thành phần p</p>
</div>
</body>
</html>

Hiển thị trình duyệt:

Ta thấy thanh cuộn ngang đang nằm ở vị trí 600.

.scroll()

.scrollTop()