Scroll Positions Track करना
In this page:
$(window).scrollTop();
$(selector).scrollTop(value);
$(selector).scrollLeft(value);Window Scroll पढ़ना
बिना argument के $(window).scrollTop() call करना top से पूरे page के scroll हुए pixels की संख्या return करता है। यह 'back to top' button जैसी features के लिए आधार है जो user के एक certain point से आगे scroll करने पर दिखती हैं।
उदाहरण: Reading Window Scroll
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div style="height:2000px">Tall content</div>
<script>
console.log($(window).scrollTop());
</script>
</body>
</html>Element Scroll पढ़ना
scrollTop() सिर्फ window पर नहीं, individual scrollable elements पर भी काम करता है, यह return करते हुए कि उस specific element का content कितना scroll हुआ है। यह अपनी independent scroll position वाले किसी scrollable panel या chat box के लिए उपयोगी है।
उदाहरण: Reading Element Scroll
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="panel" style="height:100px;overflow:auto"><div style="height:500px">Tall inner content</div></div>
<script>
console.log($("#panel").scrollTop());
</script>
</body>
</html>Scroll Position Set करना
scrollTop() एक pixel value pass करके vertical scroll position set कर सकता है, page या element को तुरंत उस position पर move करते हुए। jQuery के animate() के साथ combined, यह smooth scrolling effect बनाने का तरीका भी है।
उदाहरण: Setting Scroll Position
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div style="height:2000px">Tall content</div>
<script>
$(window).scrollTop(500);
</script>
</body>
</html>Scroll Events
scroll event तब fire होता है जब भी कोई scrollable area -- window या कोई individual element -- position बदलता है, आपको user के scroll करने पर react करने देते हुए। क्योंकि यह बहुत बार fire हो सकता है, scroll handlers को अक्सर हर pixel movement पर costly काम करने से बचने के लिए throttle किया जाता है।
उदाहरण: Scroll Events
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div style="height:2000px">Tall content</div>
<script>
$(window).on("scroll", function() {
console.log("Scrolled to", $(window).scrollTop());
});
</script>
</body>
</html>किसी Element तक Scroll करना
आप किसी element के offset() coordinates को scrollTop() के साथ combine करके page को इस तरह move कर सकते हैं कि एक specific element view में आ जाए। यह 'jump to section' links और smooth-scrolling navigation menus के पीछे की basic technique है।
उदाहरण: Scroll to an Element
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div style="height:1000px"></div>
<p id="target">Target section</p>
<script>
const top = $("#target").offset().top;
$(window).scrollTop(top);
</script>
</body>
</html>- किसी scrollable न होने वाले element पर
$("#panel").scrollTop()call करना, जो हमेशा 0 return करता है क्योंकि इसेoverflow:autoयाscrollचाहिए। - एक बार
scrollTop()पढ़ना और इसके update होने की उम्मीद करना, जबकि इसे एकscrollevent handler के अंदर दोबारा पढ़ना ज़रूरी है। - कुछ browsers में page के लिए
$("body").scrollTop()इस्तेमाल करना, जबकि$(window).scrollTop()भरोसेमंद form है।
- jQuery elements पर CSS rules get और set करता है और classes manage करता है।
- यह element width, height, और inner व outer dimensions पढ़ता है।
- यह element coordinates भी report करता है और scroll positions track करता है।
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: