HTML DOM Element scrollTop ਪ੍ਰਤੀਯੋਗ

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

scrollTop ਪ੍ਰਤੀਯੋਗ ਸੈਟ ਜਾਂ ਵਾਪਸ ਕਰੋ ਇਲੈਕਟ੍ਰੌਨਿਕ ਪ੍ਰਤੀਯੋਗ ਦੀ ਲੰਬਾਈ ਦੇ ਪਿਕਸਲ ਸੰਖਿਆ ਨੂੰ。

ਹੋਰ ਦੇਖੋ:

scrollLeft ਪ੍ਰਤੀਯੋਗ

CSS overflow اپرائز

onscroll ایوینٹ

ਇੰਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਸਰਕਲ "myDIV" ਦੇ ਸਮੱਗਰੀ ਦੇ ਪਿਕਸਲ ਸੰਖਿਆ ਪ੍ਰਾਪਤ ਕਰੋ:

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

Try it yourself

ਉਦਾਹਰਣ 2

50 ਪਿਕਸਲ ਪੱਧਰੀ ਸਰਕਲ ਅਤੇ 10 ਪਿਕਸਲ ਲੰਬਾਈ ਸਰਕਲ ਕਰੋ "myDIV" ਦੇ ਸਮੱਗਰੀ:

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

Try it yourself

ਉਦਾਹਰਣ 3

50 ਪਿਕਸਲ ਪੱਧਰੀ ਸਰਕਲ ਅਤੇ 10 ਪਿਕਸਲ ਲੰਬਾਈ ਸਰਕਲ ਕਰੋ "myDIV" ਦੇ ਸਮੱਗਰੀ:

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

Try it yourself

ਉਦਾਹਰਣ 4

ਜਿਸ ਵਿੱਚ <body> ਦਾ ਸਮੱਗਰੀ ਹੰਗਮਾ ਸਕਰੋਲ 30 ਪਾਇਕਸਲ ਅਤੇ ਸਮਰਪਿਤ ਸਕਰੋਲ 10 ਪਾਇਕਸਲ ਸਕਰੋਲ ਕਰੇ :

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

Try it yourself

ਉਦਾਹਰਣ 5

ਵੱਖ-ਵੱਖ ਸਕਰੋਲ ਸਥਾਨਾਂ 'ਤੇ ਕਲਾਸ ਵਿੱਚ ਤਬਦੀਲੀ - ਜਦੋਂ ਯੂਜ਼ਰ ਪੇਜ ਦੀ ਉੱਪਰੰਤ ਪਾਸੇ 50 ਪਾਇਕਸਲ ਸਕਰੋਲ ਕਰਦਾ ਹੈ ਤਾਂ ਕਲਾਸ "test" ਵਿਸ਼ੇ ਵਿੱਚ ਜੋੜੀ ਜਾਵੇਗੀ ( ਅਤੇ ਫਿਰ ਉੱਪਰ ਸਕਰੋਲ ਕਰਨ ਤੋਂ ਬਾਅਦ ਹਟਾਈ ਜਾਵੇਗੀ ) :

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

Try it yourself

ਉਦਾਹਰਣ 6

ਜਦੋਂ ਯੂਜ਼ਰ ਪੇਜ ਦੀ ਉੱਪਰੰਤ ਪਾਸੇ 350 ਪਾਇਕਸਲ ਸਕਰੋਲ ਕਰਦਾ ਹੈ ਤਾਂ ਇੱਕ ਵਿਸ਼ੇ ਨੂੰ ਸਲਾਈਡ ਅੰਦਰ ਲਿਆਉਣਾ ( ਸਲਾਈਡਅੰਦਰ ਕਲਾਸ ਜੋੜਨਾ ) :

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

Try it yourself

Syntax

return scrollTop property:

element.scrollTop

set scrollTop property:

element.scrollTop = pixels

ਪੈਰਾਮੀਟਰ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
pixels

ਵਿਸ਼ੇ ਦੀ ਪਾਰਦਰਸ਼ਤਾ ਵਿੱਚ ਸਮਰਥਨ

  • ਜੇਕਰ ਇਹ ਸੰਖਿਆ ਨਕਾਰਾਤਮਕ ਹੈ ਤਾਂ ਇਹ ਸੰਖਿਆ 0 ਵਿੱਚ ਸੈਟ ਕਰੋ。
  • ਜੇਕਰ ਇਲੈਕਟ੍ਰੌਨ ਸਕਰੋਲ ਨਹੀਂ ਕਰ ਸਕਦਾ ਹੈ ਤਾਂ ਇਹ ਸੰਖਿਆ 0 ਵਿੱਚ ਸੈਟ ਕਰੋ。
  • ਜੇਕਰ ਇਹ ਸੰਖਿਆ ਮਨਜ਼ੂਰ ਸਭ ਤੋਂ ਵੱਡੀ ਮੁੱਲ ਤੋਂ ਵੱਧ ਹੈ ਤਾਂ ਇਹ ਸੰਖਿਆ ਸਭ ਤੋਂ ਵੱਡੀ ਮੁੱਲ ਨੂੰ ਸੈਟ ਕਰੋ。

ਵਾਪਸ ਮੁੱਲ

ਇੰਟਰਫੇਸ ਵਰਣਨ
ਨੰਬਰ ਵਿਸ਼ੇ ਦੀ ਪਾਰਦਰਸ਼ਤਾ ਵਿੱਚ ਸਮਰਥਨ

ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ

ਸਾਰੇ ਬਰਾਊਜ਼ਰ ਇਹ ਸਮਰਥਨ ਕਰਦੇ ਹਨ element.scrollTop

کروم آئی ای ایج فائرفاکس سافری آپریا
کروم آئی ای ایج فائرفاکس سافری آپریا
دستکاری دستکاری دستکاری دستکاری دستکاری دستکاری