HTML DOM स्क्रॉलटॉप प्रॉपर्टी HTML दस्तावेज़ में पिक्सेल में लंबवत रूप से स्क्रॉल किए गए तत्व की सामग्री के मान को लौटाती है और संशोधित करती है।
सिंटैक्स
निम्नलिखित वाक्य रचना है -
-
रिटर्निंग स्क्रॉलटॉप
element.scrollTop
-
स्क्रॉलटॉप जोड़ना
element.scrollTop = value
यहां मान पिक्सेल में है
उदाहरण
आइए स्क्रॉलटॉप प्रॉपर्टी का एक उदाहरण देखें -
<!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> आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा -
अब नीले . के अंदर स्क्रॉल करें शीर्ष स्क्रॉल और बाएँ स्क्रॉल का मान प्राप्त करने के लिए बॉक्स।
