HTML DOM Element scrollTop रूपरेखा

परिभाषा और उपयोग

scrollTop संग्रह को ऊपरी दिशा में स्क्रोल करने वाले पिक्सल संख्या को सेट करना या वापस करना।

अन्य देखें:

scrollLeft रूपरेखा

CSS overflow गुण

onscroll इवेंट

उदाहरण

उदाहरण 1

स्क्रोल "myDIV" के सामग्री के पिक्सल संख्या प्राप्त करें:

const element = document.getElementById("myDIV");
let x = elmnt.scrollLeft;
let y = elmnt.scrollTop;

स्वयं एक प्रयोग करें

उदाहरण 2

एक "myDIV" के सामग्री को आड़े दिशा में 50 पिक्सल और ऊपरी दिशा में 10 पिक्सल स्क्रोल करने के लिए:

const element = document.getElementById("myDIV");
element.scrollLeft = 50;
element.scrollTop = 10;

स्वयं एक प्रयोग करें

उदाहरण 3

एक "myDIV" के सामग्री को आड़े दिशा में 50 पिक्सल और ऊपरी दिशा में 10 पिक्सल स्क्रोल करें:

const element = document.getElementById("myDIV");
element.scrollLeft += 50;
element.scrollTop += 10;

स्वयं एक प्रयोग करें

उदाहरण 4

<body> की सामग्री को स्थानांतरित करें - अड्डी गति 30 पिक्सल, अड्डी गति 10 पिक्सल:

const html = document.documentElement;
html.scrollLeft += 30;
html.scrollTop += 10;

स्वयं एक प्रयोग करें

उदाहरण 5

विभिन्न गति स्थानों के वर्ग नामों के बीच परिवर्तन करें - जब उपयोगकर्ता पृष्ठ के शीर्ष से नीचे 50 पिक्सल तक गति करता है तो, वर्ग नाम "test" एलिमेंट में जोड़ा जाएगा (और फिर ऊपर की ओर गति करने पर हटा दिया जाएगा):

window.onscroll = function() {myFunction()};
function myFunction() {
  document.getElementById("myP").className = "test";
    else {
  }
    document.getElementById("myP").className = "";
  }
}

स्वयं एक प्रयोग करें

उदाहरण 6

जब उपयोगकर्ता पृष्ठ के शीर्ष से नीचे 350 पिक्सल तक गति करता है तो एक एलिमेंट (slideUp वर्ग को जोड़ें):

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    document.getElementById("myImg").className = "slideUp";
  }
}

स्वयं एक प्रयोग करें

व्याकरण

scrollTop गुण वापस करें:

element.scrollTop

scrollTop गुण सेट करें:

element.scrollTop = pixels

प्रतियोगिता मान

मान वर्णन
pixels

एलिमेंट की सामग्री के अड्डी गति के पिक्सल संख्या।

  • यदि इस संख्या नकारात्मक है, तो इस संख्या को 0 सेट कर दें।
  • यदि एलिमेंट गति करने में असमर्थ है, तो इस संख्या को 0 सेट कर दें।
  • यदि इस संख्या अनुमति दिए गए अधिकतम मान से अधिक है, तो इस संख्या को अधिकतम मान को सेट कर दें।

वापसी मान

टाइप वर्णन
संख्या एलिमेंट की सामग्री के अड्डी गति के पिक्सल संख्या।

ब्राउज़र समर्थन

सभी ब्राउज़र समर्थन करते हैं element.scrollTop：

च्रोम आईई एज फायरफॉक्स सैफारी ऑपेरा
च्रोम आईई एज फायरफॉक्स सैफारी ऑपेरा
सापोर्ट सापोर्ट सापोर्ट सापोर्ट सापोर्ट सापोर्ट