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