Question

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

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;
        });

任何人都可以帮助我。.

我的屏幕出现问题了吗？

Answer 1

您需要将html元素CSS更改为

html {
    overflow: auto;
}

Answer 2

我知道一种解决方法。它不是完美的。您会在底部看到1px的间隙。但是它不容易看到。另外，您还必须更改滚动条的颜色。如果没有其他方法，则可以调整。

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

Answer 3

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

还更新了代码段：

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>

溢出：滚动结果下边距

3 个答案: