Thuộc tính HTML Window pageYOffset trả về giá trị tính bằng pixel mà tài liệu hiện tại đã được cuộn theo chiều dọc từ góc bên trái.
Cú pháp
Sau đây là cú pháp -
window.pageYOffset
Hãy để chúng tôi xem một ví dụ về trang Cửa sổ HTML thuộc tínhYOffset -
Ví dụ
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%) no-repeat;
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.box {
width: 1000px;
height: 1000px;
background: teal;
color: #fff;
font-size: 1.5rem;
text-align: left;
padding: 20px;
}
</style>
<body>
<h1>HTML Window pageYOffset Property Demo</h1>
<button onclick="scrollFn()" class="btn">Scroll</button>
<button onclick="display()" class="btn">Show pageYOffset value</button>
<div class="box"></div>
<script>
function display() {
document.querySelector('.box').innerHTML = 'The value of pageYOffset is: ' + window.pageYOffset + 'px';
}
function scrollFn() {
window.scrollBy(0, 10);
}
</script>
</body>
</html> Đầu ra
Nhấp vào “ Hiển thị trangYOffset value ”Để hiển thị giá trị của thuộc tính pageYOffset:
Bây giờ hãy nhấp vào “ Cuộn ”Để cuộn trang -
Và sau đó nhấp lại vào “ Hiển thị giá trị trangYOffset ”Để hiển thị giá trị của pageYOffset -
