Search code examples
javascriptjqueryhtmlcssscroll

overflow: scroll results bottom margin

I am trying to make page with scrolling effect. I hid the scroll bar but it's still scrolls by,

html {
    overflow:   scroll;
    }

::-webkit-scrollbar {
    width: 0px;
    background: none;
    }

Then I used JQuery for background transition. I added two backgrounds. When I scroll to last one, there will be bottom space. It's either margin nor padding.

When I inspect the element, It's the problem with <html>.

html

<div class="main-sec">
        <div class="page1" id="p1">
              <div class="item1">
                   <h2>Sample content1</h2>
              </div>
            <div class="item2">
                   <h2>Sample content2</h2>
              </div>
        </div>

CSS

@import url('https://fonts.googleapis.com/css?family=Lobster');
        body{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            }

        html {
            overflow:   scroll;
            }

        ::-webkit-scrollbar {
            width: 0px;
            background: none;
            }

        .main-sec {
            }

        .page1 {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100vh;
            }

        .item1, .item2 {
            text-align: left;
            }

        .item1 h2,  .item2 h2 {
            color: #fff;
            padding: 10% 0 0 10%;
            font-size: 52px;
            font-family: 'Lobster', cursive;
            margin-block-start: 0em;
            margin-block-end: 0em;
            text-shadow: 2px 2px 18px #000;
            }

**Jquery

var lastScrollTop = 0;

        $(window).scroll(function(event){
           var st = $(this).scrollTop();
           if (st > lastScrollTop){
              $('.page1').css({"background":"url(https://images.pexels.com/photos/58625/pexels-photo-58625.jpeg?auto=compress&cs=tinysrgb&h=650&w=940)","background-size":"cover","background-repeat":"no-repeat"});
               //alert('downscrll');
               //down
           } else {
             $('.page1').css({"background":"url(https://images.pexels.com/photos/844297/pexels-photo-844297.jpeg?auto=compress&cs=tinysrgb&h=650&w=940)","background-size":"cover","background-repeat":"no-repeat"});
              //alert('upscrll');
              //up
           }
           lastScrollTop = st;
        });

Can anyone please help me..

Is it the problem with my screen?

Solution

  • I know a wayaround. Its not perfect though. You'll see a 1px gap at the bottom. But its not easily seen . Also you would have to change the color of the scroll . Its an adjustment if no other things works.

    ::-webkit-scrollbar {
        width: 0px;
        height:0.2%; // Change as you need
        }