Question

我有一个客户想要与cargocollective主题nonfeed类似的功能，但我们注意到如果没有滚轮，多点触控滚动或移动设备，这种布局基本上无法导航。例如，她有一个没有触控板滚动功能的上网本，并且无法导航。我也注意到老年人用鼠标抓住滚动条。

显然，一个选项是使用jQuery.scrollTop()在每个div的顶部/底部用小箭头或某些东西滚动各个div，但这似乎不是一个很好的解决方案，因为它将是一个额外的按钮层在一切之上。另一种选择是只显示滚动条，但这会破坏整个目的。

如何解决这个问题：保留空白矩形的外观，并允许在没有轮子的情况下滚动，屏幕上的额外垃圾量最少？

Answer 1

好的他们所做的就是创建一个容器div来隐藏滚动条。然后他们使用一个与容器宽度相同的内部div，除了在右边有一个只能在y上滚动的填充。

HTML：

<div id='outer'>
   <div id='scrollArea'>
       Insert Info here.
   </div>
</div>

CSS:

#outer{
   width:500px;
   height:100%;
   position:absolute;
   background-color:#ccc;
   overflow:hidden;
}
#scrollArea{
   width:500px;
   height:100%;
   overflow-y:scroll;
   padding-right:50px;
}
html,body{
   margin:0 0 0 0;
   padding:0 0 0 0;
}

链接：http://jsfiddle.net/n6S5S/

隐藏滚动条时的垂直滚动

1 个答案: