溢出：滚动结果底部边距答案

【问题标题】：overflow: scroll results bottom margin溢出：滚动结果底部边距
【发布时间】：2018-10-17 11:08:25
【问题描述】：

我正在尝试制作具有滚动效果的页面。我隐藏了滚动条，但它仍然滚动，

html {
    overflow:   scroll;
    }

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

然后我使用 JQuery 进行背景转换。我添加了两个背景。当我滚动到最后一个时，会有底部空间。要么是边距，要么是内边距。

当我检查元素时，<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;
        });

谁能帮帮我..

是我屏幕的问题吗？

【问题讨论】：

你试过 overfow-x:auto 了吗？
@GauravSingh 而不是溢出：滚动？
让它保持原样......只需添加overflow-x:auto
它无法正常工作..

标签： javascript jquery html css scroll

【解决方案1】：

您需要将html元素CSS更改为

html {
    overflow: auto;
}

【讨论】：

【解决方案2】：

我知道一个解决方法。虽然它并不完美。你会在底部看到一个 1px 的间隙。但它并不容易被看到。您还必须更改滚动的颜色。如果没有其他方法可以进行调整。

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

【讨论】：

【解决方案3】：

您需要将 html 的 overflow:scroll 更改为 overflow:auto，如下所示：

还更新了代码sn-p：

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>

【讨论】：