how browser window scroll trigger my custom scroll

Viewed 22

<!DOCTYPE html>
<html>
    <head>
        <style>
            h1 {
                color:Green;
            }
            div.gfg {
            
                width: 50%;
                height: 110px;
                overflow: scroll;
            }
        </style>
    </head>
    <body>
        <center>

        <div class="gfg">It is a good platform to learn programming.
        It is an educational website. Prepare for the Recruitment drive
        of product based companies like Microsoft, Amazon, Adobe etc with
        a free online placement preparation course. The course focuses
        on various MCQ's & Coding question likely to be asked in the
        interviews & make your upcoming placement season efficient and
        successful. Also, any geeks can help other geeks by writing
        articles on the GeeksforGeeks, publishing articles follow few
        steps that are Articles that need little modification/improvement
        from reviewers are published first. To quickly get your articles
        reviewed, please refer existing articles, their formatting style,
        coding style, and try to make you are close to them. In case you
        are a beginner, you may refer Guidelines to write an Article
        </div>
        </center>

    <section>

      <img src='img/car.jpg'></img>
      <img src='img/car.jpg'></img>
      <img src='img/car.jpg'></img>
      <img src='img/car.jpg'></img>
      <img src='img/car.jpg'></img>
      <img src='img/car.jpg'></img>

      <img src='img/car.jpg'></img>
      <img src='img/car.jpg'></img>
      <img src='img/car.jpg'></img>
      <img src='img/car.jpg'></img>
      <img src='img/car.jpg'></img>
      <img src='img/car.jpg'></img>

      <img src='img/car.jpg'></img>
      <img src='img/car.jpg'></img>
      <img src='img/car.jpg'></img>
      <img src='img/car.jpg'></img>
      <img src='img/car.jpg'></img>
      <img src='img/car.jpg'></img>

      <img src='img/car.jpg'></img>
      <img src='img/car.jpg'></img>
      <img src='img/car.jpg'></img>
      <img src='img/car.jpg'></img>
      <img src='img/car.jpg'></img>
      <img src='img/car.jpg'></img>

      <img src='img/car.jpg'></img>
      <img src='img/car.jpg'></img>
      <img src='img/car.jpg'></img>
      <img src='img/car.jpg'></img>
      <img src='img/car.jpg'></img>
      <img src='img/car.jpg'></img>


    </section>
    </body>
</html>             

Here i Want to scroll both(browser and my div class) only scroll my div class content and the content is last then scroll another section part images scroll else div class scroll is must to scroll.and how to achieve this?

Here i Want to scroll both(browser and my div class) only scroll my div class content and the content is last then scroll another section part images scroll else div class scroll is must to scroll.and how to achieve this?

0 Answers
Related