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库和鼠标滚轮插件。

＆＃13;

var exp = moment(startdate, 'DD.MM.YYYY HH:mm:ss');
moment().diff(exp, 'minutes');

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用this plugin并添加此代码

$("body").mousewheel(function(evt, chg) {
  this.scrollLeft -= (chg * 50); //need a value to speed up the change
  evt.preventDefault();
});

答案here

页面底部的滚动条

2 个答案: