主页 / 问题 / 638115
Accepted
Lex
Asked:2020-03-11 19:28:30 +0000 UTC2020-03-11 19:28:30 +0000 UTC

将滚动条移动到顶部

  • 772

如何将水平滚动条移动到页面顶部？CSS 或 JS。

谢谢！

javascript

1 个回答

  1. Best Answer

    要在元素顶部模拟第二个水平滚动条，我们需要在元素上方放置另一个“假”滚动条div，该滚动条的高度足以容纳滚动条。然后将handlers 事件分配给scroll两个元素，以便在滚动时同步它们。

    如果您需要删除底部滚动条，只需在其属性中写入overflow:hidden（在本例中为wrapper2）。

    $(function() {
  $(".wrapper1").scroll(function() {
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function() {
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});
    .wrapper1,
.wrapper2 {
  width: 300px;
  overflow-x: scroll;
  overflow-y: hidden;
}

.wrapper1 {
  height: 20px;
}

.wrapper2 {
  height: 200px;
}

.div1 {
  width: 1000px;
  height: 20px;
}

.div2 {
  width: 1000px;
  height: 200px;
  background-color: #88FF88;
  overflow: auto;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script>

<div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Content Here -->
  </div>
</div>
    示例：http: //jsfiddle.net/TBnqw/1/

    • 2

相关问题