HTML DOM स्क्रॉलटॉप प्रॉपर्टी
उदाहरण
पिक्सेल की संख्या प्राप्त करें एक <div> तत्व की सामग्री क्षैतिज और लंबवत रूप से स्क्रॉल की जाती है:
var elmnt = document.getElementById("myDIV");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
स्क्रॉलटॉप गुण सेट करता है या किसी तत्व की सामग्री को लंबवत रूप से स्क्रॉल किए जाने वाले पिक्सेल की संख्या देता है।
युक्ति: किसी तत्व की सामग्री को क्षैतिज रूप से स्क्रॉल किए जाने वाले पिक्सेल की संख्या सेट करने या वापस करने के लिए स्क्रॉल लेफ्ट प्रॉपर्टी का उपयोग करें ।
युक्ति: किसी तत्व में स्क्रॉलबार जोड़ने के लिए, CSS अतिप्रवाह गुण का उपयोग करें।
युक्ति: ऑनस्क्रॉल ईवेंट तब होता है जब किसी तत्व की स्क्रॉलबार स्क्रॉल की जा रही होती है।
ब्राउज़र समर्थन
Property | |||||
---|---|---|---|---|---|
scrollTop | Yes | Yes | Yes | Yes | Yes |
वाक्य - विन्यास
स्क्रॉलटॉप संपत्ति लौटाएं:
element.scrollTop
स्क्रॉलटॉप संपत्ति सेट करें:
element.scrollTop = pixels
सम्पत्ति की कीमत
Value | Description |
---|---|
pixels |
Specifies the number of pixels the element's content is scrolled vertically. Special notes:
|
टेक्निकल डिटेल
प्रतिलाभ की मात्रा: | एक संख्या, पिक्सेल की संख्या का प्रतिनिधित्व करती है कि तत्व की सामग्री को लंबवत रूप से स्क्रॉल किया गया है |
---|
और ज्यादा उदाहरण
उदाहरण
<div> तत्व की सामग्री को क्षैतिज रूप से 50 पिक्सेल और लंबवत रूप से 10 पिक्सेल तक स्क्रॉल करें :
var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft = 50;
elmnt.scrollTop = 10;
उदाहरण
<div> तत्व की सामग्री को क्षैतिज रूप से 50 पिक्सेल और लंबवत रूप से 10 पिक्सेल तक स्क्रॉल करें:
var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft += 50;
elmnt.scrollTop += 10;
उदाहरण
<body> की सामग्री को क्षैतिज रूप से 30 पिक्सेल और लंबवत रूप से 10 पिक्सेल तक स्क्रॉल करें:
var body = document.body; // Safari
var html = document.documentElement; //
Chrome, Firefox, IE and Opera places the overflow at the <html> level, unless else is specified. Therefore, we use the
documentElement property for these browsers
body.scrollLeft += 30;
body.scrollTop += 10;
html.scrollLeft += 30;
html.scrollTop += 10;
उदाहरण
विभिन्न स्क्रॉल स्थितियों पर वर्ग नामों के बीच टॉगल करें - जब उपयोगकर्ता पृष्ठ के शीर्ष से 50 पिक्सेल नीचे स्क्रॉल करता है, तो कक्षा का नाम "परीक्षण" एक तत्व में जोड़ा जाएगा (और फिर से स्क्रॉल करने पर हटा दिया जाएगा)।
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
उदाहरण
एक तत्व में स्लाइड करें जब उपयोगकर्ता ने पृष्ठ के शीर्ष से 350 पिक्सेल नीचे स्क्रॉल किया हो (स्लाइडअप वर्ग जोड़ें):
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
}
उदाहरण
स्क्रॉल पर एक त्रिभुज बनाएं:
<!-- Use SVG to draw the triangle (has to be <path>) -->
<svg id="mySVG">
<path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z">
</svg>
<script>
// Get the id of the <path> element and the length of <path>
var triangle = document.getElementById("triangle");
var length = triangle.getTotalLength();
// The start position of the drawing
triangle.style.strokeDasharray = length;
// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
triangle.style.strokeDashoffset = length;
// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled
window.addEventListener("scroll", myFunction);
function myFunction() {
var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
var draw = length * scrollpercent;
// Reverse the drawing (when scrolling upwards)
triangle.style.strokeDashoffset = length - draw;
}
</script>