CODEWITHSUNDEEP
javascriptjqueryhtmlcssscroll
RA'sal
RA'sal

Reputation: 135

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?

Upvotes: 1

Views: 2027

Answers (4)

Max Dax
Max Dax

Reputation: 79

I had the same issue, seems like there is no native way to display bottom margin in a scroll bar for it's elements.

I simply created a new element and used that as a gap margin which will be displayed to the scroll bar.

Items being dead flat flushed to the scrollbar's bottom looks weird.

Here is the CSS element code I used to create an invisible margin which resides at the bottom inside the scrollbar window pane:

#user_address_book_contents .last_element_bottom_margin
{
      box-sizing: border-box;

      position: absolute;
      width: 185px;
      height: 8px;
      left: 0px;
      top: 328px;
      
      background: rgba(255, 255, 255, 0)
}

Upvotes: 0

abhndv
abhndv

Reputation: 209

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
        }

Upvotes: 2

Vikas Jadhav
Vikas Jadhav

Reputation: 4692

you need to change overflow:scroll to overflow:auto for html as given below:

also updated code snippet:

html {
    overflow: auto;
}


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;
});
@import url('https://fonts.googleapis.com/css?family=Lobster');
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

html {
  overflow: auto;
}

 ::-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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Upvotes: 1

Sonia
Sonia

Reputation: 1919

You need to changes html element CSS to 

html {
    overflow: auto;
}

Upvotes: 3

Related Questions