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

బయలుదేరు ప్రాంతం అంతరాయం నుండి హరిద్రించే పిక్సెల్స్ 30 మరియు అంతరాయం నుండి హరిద్రించే పిక్సెల్స్ 10 సెట్ చేయండి:

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

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 5

వివిధ స్క్రాల్ స్థానాల్లో క్లాస్ పేర్లను మార్చుకోండి - ఉపయోక్త పేజీ పైభాగం నుండి క్రిందకు 50 పిక్సెల్స్ స్క్రాల్ చేసినప్పుడు క్లాస్ పేర్ "test" ఎలిమెంట్ కు జోడించబడుతుంది (మరియు మళ్ళీ ఎప్పుడు మేల్కొనుటకు తొలగిస్తారు):

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  }
    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：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 支持 支持 支持 支持 支持