scrollTop and scrollLeft Methods 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>scrollTop scrollLeft Methods JavaScript</title>
    <link rel="stylesheet" href="css/scrollTop_scrollLeft_Methods_JavaScript.css">
</head>

<body>
    <h2>JavaScript scrollTop & scrollLeft</h2>
    <div id="box">
        <div id="inner-box"></div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae nesciunt accusamus numquam unde
        culpa provident deserunt mollitia ipsa natus asperiores eaque eveniet modi minima ullam incidunt exercitationem,
        doloribus quos. Corrupti veritatis facere eius culpa nihil, commodi, ea pariatur quibusdam non ullam in
        excepturi quis. Atque cum aliquam ipsum, doloribus modi, enim totam porro commodi nisi voluptates asperiores
        explicabo facere officiis vero qui fugit nulla necessitatibus fuga, corrupti voluptas maxime facilis sint rerum
        dicta. Exercitationem, pariatur necessitatibus ad consequatur accusamus asperiores voluptates explicabo nam
        reprehenderit quidem inventore corporis aut dolorum quo expedita eveniet rerum esse. Cupiditate dignissimos
        debitis, accusamus esse repellendus placeat voluptates nesciunt doloribus, nisi minima, velit fuga asperiores
        eveniet delectus adipisci magnam commodi veritatis! Odio fugit numquam modi rerum! Mollitia autem provident
        similique, fugit facilis aliquid quod voluptas exercitationem animi dolores pariatur soluta nesciunt minus
        itaque culpa non ex dicta, amet tempora! Minima ex aperiam perferendis quibusdam explicabo? Dicta delectus
        soluta dolor ratione aut consectetur dolorem numquam nostrum esse. Beatae veniam cumque quam excepturi itaque!
        Eveniet, corrupti? Facilis, enim accusantium sequi libero, molestias corrupti laudantium ab quod impedit in
        inventore rerum soluta necessitatibus voluptatum non amet mollitia expedita debitis reprehenderit minima
        eligendi. Error atque quasi facere et laboriosam eligendi consectetur mollitia, veritatis libero quae, corporis
        ut dolor magnam reprehenderit animi, aspernatur omnis? Qui nulla possimus deserunt consequatur minima repellat,
        aliquam libero sapiente omnis exercitationem facilis harum, quisquam dolor fugit! Nobis enim ex nesciunt quam
        molestiae quo odio repellat aut eos eum perspiciatis reiciendis suscipit officia quas esse, repellendus
        architecto quod excepturi mollitia id voluptatem beatae nulla autem! Dolorum incidunt quasi error. Eaque
        perspiciatis, voluptatum totam nobis distinctio ex earum. Accusamus minus, aut sit similique dolores,
        repudiandae iste suscipit aspernatur autem deserunt vero consequuntur provident quisquam expedita? Est aliquid
        neque culpa similique fugiat quam voluptas facere minima autem tempora iusto temporibus consectetur, dignissimos
        voluptatibus. Ipsa ipsam, similique, alias possimus minima quae earum inventore voluptatibus tenetur doloremque
        aliquid deserunt repellat quam, nisi voluptas recusandae! Commodi rem non porro aut inventore fugiat veritatis,
        distinctio in sapiente maiores odio reprehenderit sequi earum voluptatem blanditiis exercitationem, eligendi
        eius facere enim sit. Placeat laudantium ad quos sequi distinctio expedita, sapiente reiciendis quia corporis at
        labore corrupti commodi. Sit doloribus et ratione, nemo laudantium dignissimos! Non fugit veniam et nihil
        repudiandae adipisci deserunt inventore velit aut saepe esse ullam, tempora ipsam odit pariatur mollitia,
        consequuntur earum harum nostrum cum qui quis, fugiat corrupti voluptatibus. Hic quasi optio non sequi, incidunt
        et animi sit voluptate culpa commodi deleniti vero saepe deserunt recusandae accusamus veniam nulla ea.
        Provident ipsam sapiente, delectus ea fuga eaque veritatis laudantium necessitatibus reprehenderit hic eos
        voluptas sit pariatur nobis cupiditate dolores iure doloremque adipisci quam? Eligendi soluta dignissimos ullam
        nobis exercitationem laudantium laborum accusantium provident magnam officiis? Eos voluptates ullam vel
        doloremque natus perferendis odio earum modi hic facilis a ut commodi minima quidem doloribus, eum magnam. Cum
        nobis commodi soluta cupiditate expedita modi voluptatum, molestias doloribus quo distinctio ex earum, at sequi
        mollitia eveniet consectetur adipisci. Veritatis, temporibus corporis. Laudantium, eius voluptatem.
    </div>
    <script>
        const target = document.querySelector("#box");
        target.addEventListener("scroll", () => {
            console.clear();
            console.log("scrollTop : " + target.scrollTop);
            console.log("scrollLeft : " + target.scrollLeft);
        });
    </script>
</body>

</html>




Below File is css/scrollTop_scrollLeft_Methods_JavaScript.css File
#box {
    background: #ffc0cb;
    width: 300px;
    height: 300px;
    overflow: auto;
    border: 1px solid #000000;
}

#inner-box {
    background: #90ee90;
    width: 1000px;
    height: 150px;
}



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