jquery中的滚动条（需要在页面底部放置一个滚动条）

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>