onscroll ఇవెంట్

DOM ఇవెంట్స్ Event ఆబ్జెక్ట్

నిర్వచనం మరియు వినియోగం

ఎలమెంట్నికి స్క్రోల్ బార్ స్క్రోల్ చేసినప్పుడు onscroll ఇవెంట్ జరుగుతుంది.

హిందూస్థాన్ టిప్పణి:CSS వినియోగించండి overflow ఎలమెంట్నికి స్క్రోల్ బార్ స్టైల్ సాధించడానికి వినియోగించండి CSS

ఉదాహరణ

ఉదాహరణ 1

డివ్ ఎలమెంట్ను స్క్రోల్ చేసినప్పుడు జావాస్క్రిప్ట్ అమలు చేయండి:

<div onscroll="myFunction()">

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

ఉదాహరణ 2

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

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

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

ఉదాహరణ 3

ఉపయోగదారి పేజీ పైభాగాన్ని నుండి క్రిందకు 350 పిక్సెల్స్ గా స్క్రోల్ చేసినప్పుడు స్లైడ్ అవుతుంది (slideUp క్లాస్ జోడించండి):

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

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

విధానం

HTML లో:

<element onscroll="myScript">

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

జావాస్క్రిప్ట్ లో:

object.onscroll = function(){myScript};

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

జావాస్క్రిప్ట్ లో, addEventListener() పద్ధతి ఉపయోగించడం ద్వారా:

object.addEventListener("scroll", myScript);

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

ప్రకటన:ఇంటర్నెట్ ఎక్స్ప్లోరర్ 8 లేదా అది ముంది సంస్కరణలు మద్దతు లేవు addEventListener() పద్ధతి。

సాంకేతిక వివరాలు

బాపింగ్ అవుతుంది: మద్దతు లేదు
రద్దు చేయగలిగే విధం లో ఉంది: మద్దతు లేదు
ఇవెంట్ రకం: ఉపయోగదారి ఇంటర్ఫేస్ నుండి ఉద్భవించినట్లయితే,UiEvent。 Event。
మద్దతు వచ్చిన HTML టాగ్లు: <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> to <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul>
DOM వెర్షన్: లెవల్ 2 ఇవెంట్స్

బ్రౌజర్ మద్దతు

ఇవెంట్స్ చ్రోమ్ ఐఈ ఫైర్ఫాక్స్ సఫారీ ఒపెరా
onscroll మద్దతు మద్దతు మద్దతు మద్దతు మద్దతు
DOM ఇవెంట్స్ Event ఆబ్జెక్ట్