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

Question

在下面的代码中，我想在所有浏览器中不使用 overflow 属性隐藏第一个 block (div1) 的滚动条。

任何建议都会有所帮助。

fiddle : http://jsfiddle.net/mvn1ngby/12/

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

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

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

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

Answer 1

这是一个 hack，但有效。 这个想法是将滚动条的区域拉到视口(viewport)之外。

“拉”的大小应该是滚动条的宽度，通常是较宽的(在 Windows 上)

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

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

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

<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>