0

Actually i want to create a one page website. I want to load page contents on scroll. For Example First load content with default height like 900 PX. After that if user scroll down then load other contents. On my website i have many div elements. Like below.

<div class="first">My contents</div>
<div class="second">My contents</div>
<div class="third">My contents</div>
Naeem Hussain
  • 21
  • 5
  • 1
    Could you specify what you mean by "load"? Should the div become visible? Should the div be loaded from a server? Is there anything you already tried to accomplish your goal? – D B Jul 06 '20 at 11:58
  • first div visible at first page load from server. After that second div show when user scroll the html web page – Naeem Hussain Jul 06 '20 at 12:01
  • You don't mention your development environment other than Javascript/HTML - Some of them already have scroll-load solutions in libraries you can import which saves you a lot of work. Plenty of resource sout there https://stackoverflow.com/questions/14035180/jquery-load-more-data-on-scroll –  Jul 06 '20 at 12:05
  • Do you mean something like this: [Codepen](https://codepen.io/alvarotrigo/pen/NxyPPp)? I would guess there are plenty of solutions out there that one could use. If you want to code it by yourself, a good way is to set the body to `overflow: hidden;` to prevent scrolling and then using a event listener on scroll to hide/show the divs – D B Jul 06 '20 at 12:08
  • I don't want to display all html page contents at first page open from server. I want to displayed content in parts. – Naeem Hussain Jul 06 '20 at 12:13

1 Answers1

0

The general scheme in my opinion is to add "scroll" event listener. In callback function check if scroll position is near the end of the page and then load more stuff.

<html>
<style>
    .container>div {
        min-height: 80vh;
    }
</style>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <script>
        window.addEventListener("scroll", function () {
            var el = document.querySelector(".container");
            if (el.scrollTop + el.offsetHeight > el.scrollHeight - 300) {
                console.log("do loading...")
            }
        })
    </script>
</body>
</html>
yairl
  • 56
  • 1
  • 3