Thuộc tính DOM scrollLeft trả về và sửa đổi giá trị nội dung của phần tử được cuộn theo chiều ngang theo pixel trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
-
Trả lại scrollLeft
element.scrollLeft
-
Thêm scrollLeft
element.scrollLeft = value
Đây giá trị tính bằng pixel
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính scrollLeft -
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
color:#fff;
background: #ff7f5094;
height:100%;
}
p{
font-weight:700;
font-size:1.8rem;
height:80px;
overflow:auto;
width:150px;
margin:20px auto;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
.show{
font-size:1.5rem;
}
#myDIV {
height: 200px;
width: 200px;
overflow: auto;
margin:20px auto;
}
#content {
height: 400px;
width: 1000px;
background-color: lightblue;
}
</style>
</head>
<body>
<h1>DOM scrollLeft/scrollTop Property Demo</h1>
<div id="myDIV" onscroll="display()">
<div id="content"></div>
</div>
<div class="show"></div>
<script>
function display() {
var elmnt = document.getElementById("myDIV");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;
document.querySelector(".show").innerHTML = "Top Scroll = " + x + "px Left Scroll = " + y + "px";
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Bây giờ, cuộn bên trong màu xanh lam để lấy giá trị của cuộn trên cùng và cuộn trái.
