Thuộc tính HTML Window pageXOffset trả về giá trị tính bằng pixel mà tài liệu hiện tại đã được cuộn theo chiều ngang từ góc bên trái.
Cú pháp
Sau đây là cú pháp -
window.pageXOffset
Hãy để chúng tôi xem một ví dụ về HTML Window pageXOffset Property -
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 pageXOffset Property Demo</h1>
<button onclick="scrollFn()" class="btn">Scroll</button>
<button onclick="display()" class="btn">Show pageXOffset value</button>
<div class="box"></div>
<script>
function display() {
document.querySelector('.box').innerHTML = 'The value of pageXOffset is: ' + window.pageXOffset + 'px';
}
function scrollFn() {
window.scrollBy(10, 0);
}
</script>
</body>
</html> Đầu ra
Nhấp vào “ Hiển thị giá trị pageXOffset ”Để hiển thị giá trị của thuộc tính pageXOffset:
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ị pageXOffset ”Để hiển thị giá trị của pageXOffset -
