HTML DOM scrollLeft प्रॉपर्टी

scrollLeft प्रॉपर्टी क्या है?

DOM scrollLeft प्रॉपर्टी किसी तत्व के कंटेंट को क्षैतिज रूप से कितने पिक्सेल स्क्रॉल किया गया है, यह प्राप्त या सेट करती है। यह केवल उन तत्वों पर काम करती है जिनमें overflow सेट हो (जैसे auto, scroll, या hidden)।

सिंटैक्स

scrollLeft मान प्राप्त करना

element.scrollLeft

scrollLeft मान सेट करना

element.scrollLeft = value

यहां value पिक्सेल में एक पूर्णांक है।

उदाहरण

यह उदाहरण (scrollTop के समान) एक स्क्रॉल करने योग्य डिव के अंदर क्षैतिज और ऊर्ध्वाधर दोनों स्क्रॉल स्थितियों को प्रदर्शित करता है:

<!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;
    border: 2px solid #fff;
  }
  #content {
    height: 400px;
    width: 1000px;
    background-color: lightblue;
  }
</style>
</head>
<body>
<h1>DOM scrollLeft/scrollTop प्रॉपर्टी डेमो</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 = " + y + "px, Left Scroll = " + x + "px";
  }
</script>
</body>
</html>

आउटपुट

नीले बॉक्स (#content) के अंदर क्षैतिज और ऊर्ध्वाधर दोनों दिशाओं में स्क्रॉल करें ताकि स्क्रॉल मान वास्तविक समय में अपडेट हों।

scrollLeft बनाम scrollTop

व्यावहारिक उपयोग

• क्षैतिज स्क्रॉल कंट्रोल: कस्टम स्क्रॉलबार, स्लाइडर, कैरोसेल।
• RTL भाषाएं: राइट-टू-लेफ्ट लेआउट में scrollLeft व्यवहार ब्राउज़र के अनुसार भिन्न हो सकता है (नकारात्मक मान या scrollWidth - clientWidth से शुरू)।
• सिंक्रनाइज़्ड स्क्रॉलिंग: दो पैन को क्षैतिज रूप से सिंक में स्क्रॉल करना (कोड डिफ टूल्स)।

सामान्य पैटर्न

// बाएं किनारे पर स्क्रॉल करें
element.scrollLeft = 0;

// दाएं किनारे पर स्क्रॉल करें
element.scrollLeft = element.scrollWidth - element.clientWidth;

// स्मूथ क्षैतिज स्क्रॉल
element.scrollTo({ left: 200, behavior: 'smooth' });

नोट्स

• यदि तत्व में ओवरफ्लो नहीं है या कंटेंट कंटेनर से चौड़ा नहीं है, तो scrollLeft हमेशा 0 होता है।
• दिशा (LTR/RTL) के आधार पर मान नकारात्मक हो सकते हैं (ब्राउज़र कार्यान्वयन भिन्न होता है)।