Thuộc tính HTML DOM scrollTop trả về và sửa đổi giá trị nội dung của phần tử được cuộn theo chiều dọc theo pixel trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
-
Trả lại scrollTop
element.scrollTop
-
Thêm scrollTop
element.scrollTop = 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 scrollTop -
<!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.
