javascript - 页面底部的滚动条

Question

想要获得与此页面上的水平滚动条相同的结果:https://www.claytonbozard.com/#5

我需要创建一个看起来像默认底部滚动条的滚动条，它始终位于页面底部，并且只会滚动特定部分。 (不是所有页面，只有特定部分)任何人都可以帮助我吗？

我写了这段代码，但是滚动条没有放在页面底部:

.wrapper {
  /* background: #EFEFEF; */
  /* box-shadow: 1px 1px 10px #999; */
  margin: auto;
  text-align: center;
  position: relative;
  /* margin-bottom: 20px !important; */
  width: 100%;
  /* padding-top: 5px; */
}

.scrolls {
  overflow-x: scroll;
  overflow-y: hidden;
  /* height: 300px; */
  white-space: nowrap;
}

.scrolls img {
  width: 20%;
  cursor: pointer;
  display: inline-block;
  display: inline;
  margin-right: -5px;
  vertical-align: top;
}

<div class="wrapper">
  <div class="scrolls">
    <img src="images/01.jpg" />
    <img src="images/04.jpg" />
    <img src="images/07.jpg" />
  </div>
</div>

Answer 1

完全正确。对于水平滚动 - 您将需要一个 jQuery 库和鼠标滚轮插件。

$(document).ready(function () {
    $('.horizontal-scroll').mousewheel(function(e, delta) {
        this.scrollLeft -= (delta * 40);
        e.preventDefault();
    });
});

.horizontal-scroll {
  
 max-width: 100%;
 overflow: scroll;
 width: 100%;
 display: block;
}
ul {
    white-space:nowrap;
}
li { display: inline-block; width: 300px; height: 300px; background: red; border: 2px solid black; margin: 5px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://css-tricks.com/examples/HorzScrolling/jquery.mousewheel.js"></script>
<div class="horizontal-scroll">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>