Question

在下面的代码中，我想在所有浏览器中隐藏第一个块的滚动条（ div1 ）而不使用where pip属性。

任何建议都会有所帮助。

小提琴： http://jsfiddle.net/mvn1ngby/12/

＆＃13;

overflow

＆＃13;

$('#div1').scroll(function(){
    $('#div2').scrollTop( $('#div1').scrollTop() );
});

$('#div2').scroll(function(){
    $('#div1').scrollTop( $('#div2').scrollTop() );
});

＆＃13;

div.outer {
    display:inline-block;
    width:150px;
    height:320px;
    border:1px solid black;
    overflow-y:auto;
}

div.outer > div {
    height:3000px;
}
#div1 div {
  width:300px;
}

＆＃13;

Answer 1

尝试使用css添加新的容器div：

.container { width: 100%;}

内部放 div1，div2

Answer 2

这是一个黑客，但有效。我们的想法是将滚动条的区域拉到视口之外。

＆＃34;拉＆＃34;大小假设与滚动条的宽度有关，通常是较宽的（在Windows上）

＆＃13;

div.outer {
  display: inline-block;
  overflow: hidden;
  border: 1px solid black;
}

#div1>div,
#div2>div {
  height: 3000px;
}

.scrollable {
  width: 150px;
  height: 320px;
  overflow-y: auto;
}

#div1 {
  margin-right: -25px;
  padding-right: 25px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <div class="scrollable" id="div1">
    <div></div>
  </div>
</div>
<div class="outer">
  <div class="scrollable" id="div2">
    <div></div>
  </div>
</div>

＆＃13;

release

＆＃13;

在所有浏览器中隐藏垂直滚动条

2 个答案: