pageYOffset and pageXOffset tutorial in JavaScript

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>pageYOffset pageXOffset JavaScript</title>
    <link rel="stylesheet" href="css/pageYOffset_pageXOffset_JavaScript.css">
</head>

<body>
    <div id="box"></div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ut a laudantium dicta doloremque nam sed
        adipisci consequuntur! Eligendi accusamus modi voluptatibus, est expedita officiis veritatis perferendis dicta
        minima dolor iste ipsa facilis unde! Non eveniet a quaerat at aliquid fugiat molestias. Exercitationem porro
        aliquam labore aliquid blanditiis rerum quibusdam voluptatem vitae quasi, dicta nam, delectus possimus itaque
        illum! Eveniet iure asperiores eum molestias corrupti obcaecati quod iste tenetur distinctio, ducimus, nemo in
        nobis libero harum, tempore inventore. Nesciunt aliquid perspiciatis sit ducimus dicta quaerat pariatur cum
        distinctio fugit qui expedita excepturi, officiis inventore reiciendis! Aperiam, officiis. Aspernatur cumque
        quas, ipsam molestiae quae ad cupiditate, consectetur quod recusandae debitis illum itaque distinctio nesciunt
        ratione? Nam natus nostrum earum voluptatem! Vitae exercitationem nulla sapiente sed alias accusantium
        temporibus amet quisquam, autem nam magni, recusandae dolore eos culpa! Exercitationem mollitia consectetur
        soluta perspiciatis cumque dolorum, veritatis nam totam quibusdam magni veniam similique delectus, fugit
        distinctio ullam culpa possimus a atque dolores natus obcaecati quisquam iste? Provident quis voluptatum, saepe
        eos sequi a! Ab sapiente eveniet dolore debitis illum doloribus laudantium ipsa nesciunt quo eaque, provident
        voluptate veniam error commodi! Sit eius mollitia rerum magnam sapiente nostrum quidem soluta laborum suscipit.
        Esse pariatur accusamus autem ut iure ullam ipsam voluptatibus doloribus culpa dignissimos. Est, atque. Quaerat
        facilis cumque distinctio modi et nam, unde ullam dolorum rerum veniam eaque voluptatem quis sit ipsa culpa
        omnis quam, consectetur blanditiis quibusdam. Cumque tenetur ex vitae autem maxime quaerat veniam. Dolores id,
        quae laboriosam illum error culpa laudantium at distinctio nulla? Sapiente corporis quasi quibusdam amet
        nostrum, autem cum totam odio inventore libero, repellendus iusto voluptas. Fuga corporis recusandae
        perspiciatis nemo reprehenderit, animi est ut deleniti ab ducimus rem fugit earum similique voluptatum eum illum
        neque quas laborum modi molestiae tempore consequatur exercitationem sequi. Illum optio nulla porro praesentium
        neque eveniet voluptatum animi explicabo quidem ut. Repellat doloremque suscipit laborum ipsa exercitationem
        mollitia iusto quae fugit perferendis temporibus vero minus, debitis reprehenderit! Dolore quam nihil molestias,
        sunt debitis perspiciatis veniam itaque odio ipsa quia porro amet beatae saepe id. Repellendus blanditiis ipsa
        laudantium vitae id eum ipsum, nam saepe eaque quae quo debitis ratione animi, omnis excepturi voluptatum
        tenetur voluptatibus doloribus? Facere delectus assumenda ipsum doloremque, ut velit molestias consequuntur
        aspernatur omnis illo minus sunt laborum fuga recusandae possimus aliquid voluptas. Minima incidunt quos
        adipisci eaque laborum fugiat debitis excepturi similique ea ex fuga saepe in reprehenderit voluptas sit
        temporibus ipsam nihil illum praesentium sunt facere, numquam quasi. Soluta molestiae ea quia ipsa rem molestias
        dicta, harum, beatae ad esse eveniet distinctio quasi mollitia aut numquam unde, repellat ipsum totam tempora at
        recusandae illum? Est dolore repudiandae eos voluptas? Nihil, alias? Et tempore quod libero, laborum voluptate
        sequi similique modi sit corporis totam ea blanditiis ducimus dolore voluptatum consequatur magnam rem est,
        facilis fugit excepturi eius non. Optio dolore repudiandae ad deserunt id sint sapiente veniam tempora impedit,
        eaque dolor maxime? Hic accusamus quasi, sit officia nobis animi dignissimos fugit. Obcaecati labore neque qui
        dicta fugit voluptate deleniti. Ipsum temporibus enim odio aliquam quasi, dolorem laborum perspiciatis! Quia et
        unde adipisci quos maiores possimus natus recusandae. Eaque eum ipsum maiores incidunt delectus! Voluptatibus
        quasi, hic temporibus maiores nostrum beatae assumenda commodi veniam pariatur excepturi, fugit architecto unde
        vero magnam animi at doloremque quibusdam accusantium minima voluptatem modi dicta dolor quam impedit. Quas
        soluta distinctio odit totam quos illum aliquam adipisci sequi, doloribus cumque, molestiae dolor reprehenderit.
        Ratione mollitia in praesentium dignissimos ad voluptatum maiores molestiae, modi accusamus numquam tenetur quos
        veritatis id dicta cupiditate optio consequatur, nostrum rerum. Laborum velit dicta beatae quasi delectus
        eveniet. Voluptate corrupti quos consectetur ea, adipisci incidunt cumque officia praesentium, tenetur nisi,
        natus ex! Quos optio a placeat magni rerum quo voluptatem modi unde aspernatur quia, fugiat beatae atque aliquid
        voluptatibus dolor sit voluptate consequuntur harum delectus deleniti adipisci nulla. Aut, voluptate asperiores!
        Magni vitae facere, debitis in pariatur aperiam minima sapiente amet placeat corrupti labore reprehenderit iure
        laboriosam sequi aliquid dignissimos sit aliquam voluptatem? Molestiae sit autem exercitationem accusamus et,
        ullam ratione, fugit soluta, ea minima numquam fugiat voluptatum dolores doloribus doloremque nostrum dolorum
        odio! Impedit qui saepe corrupti, debitis dolore eligendi adipisci neque quidem cumque voluptas maxime nobis
        esse blanditiis incidunt veniam nostrum magnam a provident odit, totam harum minima ipsa. Nesciunt error est
        harum. Quod vel cumque hic qui! Reprehenderit iure similique voluptatibus cum? Iusto corporis itaque sed,
        recusandae quas accusamus vitae laudantium, quaerat, error doloremque labore culpa ad quidem quam sunt autem
        incidunt blanditiis aliquid. Iure molestiae sed natus perferendis dolorem sit animi blanditiis cum libero, illo
        ex ad recusandae quas commodi vitae doloribus voluptas quaerat dolores veniam. Facilis repellendus temporibus,
        odit velit obcaecati inventore voluptatibus quaerat vitae a laudantium labore necessitatibus porro sed similique
        perferendis veritatis dolores voluptatem magnam suscipit atque eum aperiam consequatur iure autem! Consequuntur.
    </p>
    <script>
        window.addEventListener("scroll", function () {
            console.clear();
            console.log("pageYOffset : " + window.pageYOffset);
            console.log("pageXOffset : " + window.pageXOffset);
        });
    </script>
</body>

</html>





Below File is css/pageYOffset_pageXOffset_JavaScript.css File
#box {
    width: 1200px;
    height: 300px;
    background: #90ee90;
}


Comments

Post a Comment

Popular posts from this blog

Generators tutorial in Advance JavaScript

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > Generators Advance JavaScript </ title >     < link rel = "stylesheet" href = "" > </ head > < body >     < script >         //Example 1 :         // function* generateit() {         //     console.log("First Message");         //     yield "Yield No. 1"; //Here Statement will be Pause, To remove the Pause we have to call next() method again as shown below         //     console.log("Second Message");         //     yield "Yield No. ...
Read more

Document Object Module DOM querySelector and querySelectorAll tutorial in JavaScript

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > DOM querySelector querySelectorAll JavaScript </ title >     < link rel = "stylesheet" href = "css/main.css" > </ head > < body >     < div id = "wrapper" >         < div id = "header" class = "abc" style = " border:1px solid #ff0000;" onClick = "xyz()" >             < h1 > Hello World </ h1 >             < h1 > Welcome </ h1 >         </ div >         < div id = "menu" >             < ul >...
Read more

Find Even and Odd Numbers with Loops tutorial in JavaScript

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > Even Odd Numbers with Loops </ title >     < script >         for ( var a = 1 ; a <= 10 ; a ++) {             if ( a % 2 == 0 ) {                 document . write ( "Even Number : " + a + "<br>" );             }         }         for ( var b = 1 ; b <= 10 ; b ++) {             if ( b % 2 != 0 ) {                 document . write ( "Odd Number : " + b + "<br>"...
Read more