Question

我正在设计一个我使用smooth-scrollbar进行平滑滚动的设计。

我已经在我的页面上实现了两次，首先是在整个页面上，第二次是在div元素上。

它在div元素上正常工作，但在正文上却没有。

我无法滚动浏览器不断显示默认滚动条。

这是我到目前为止所做的代码

    <html>
    <head>
        <title>Jain University</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link href='../css/aos.css' rel='stylesheet' type='text/css'>
        <link href='../css/smooth-scrollbar.css' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
        <link href="../css/style.css" type="text/css" rel="stylesheet">
    </head>
    <body>
    <div id="main-scrollbar" data-scrollbar>

    <div class="container-fluid slide slide1" data-color="#EF6C00">
    <div class="rows">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <img src="../images/homepage1.jpg" class="img-responsive">           
        </div>
     </div>
    </div>
    <div class="container-fluid slide slide2" data-color="#009688">
    <div class="rows">
        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12" data-aos="fade-right">
            <img src="../images/homepage1.jpg" class="img-responsive">
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 col-lg-offset-2 col-md-offset-2" data-aos="fade-left">
            <div class="simplebar-content aboutus" data-scrollbar>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim, venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim, venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim, venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim, venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim, venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim, venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim, venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim, venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>
            </div>
        </div>
    </div>
   </div><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="../js/smooth-scrollbar.js"></script>
        <script src="../js/aos.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
                <script> Scrollbar.initAll(); </script>
        <script>
            AOS.init({
                easing: 'ease-out-back',
                duration: 1000
            });

        </script>
<script>
    $(window).on("scroll touchmove", function() {
        if ($(document).scrollTop() >= $(".slide1").position().top) {
            $('body').css('background', $(".slide1").attr("data-color"));
            $('.navbar').css({'background': $(".slide1").attr("data-color"),opacity:'0.9'});

        };
        if ($(document).scrollTop() > $(".slide2").position().top) {
            $('body').css('background', $(".slide2").attr("data-color"));
            $('.navbar').css({'background': $(".slide2").attr("data-color"),opacity:'0.9'});
        };
    });
</script>
</body>
</html>

Answer 1

你必须为每个项目设置一个高度，否则它将不起作用

[data-scrollbar]{
  height: 500px;/*<<<<<required*/
}

yay JS

<script>
  Scrollbar.initAll({
    alwaysShowTracks: true,
    overscrollEffect: "bounce"
  });
</script>

平滑滚动条无法在body元素

1 个答案: