0

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

显然，一种选择是jQuery.scrollTop()在每个 div 的顶部/底部使用小箭头或其他东西滚动单个 div，但这似乎不是一个很好的解决方案，因为它将是所有内容之上的额外按钮层。另一种选择是只显示滚动条，但这违背了整个目的。

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

4

1 回答 1

0

好的，他们所做的是创建一个容器 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/

于 2013-06-06T00:48:13.260 回答