I have a client who wants a similar functionality to the cargocollective theme nonfeed, but we've noticed that this layout is basically impossible to navigate without a scroll wheel, multi-touch scrolling, or a mobile device. For instance, she has a netbook without a trackpad scroll feature, and it's impossible to navigate. I've also noticed that older folks grab the scrollbar with a mouse.
我有一个客户想要与cargocollective主题非馈送类似的功能,但我们注意到如果没有滚轮,多点触控滚动或移动设备,这种布局基本上是不可能导航的。例如,她有一个没有触控板滚动功能的上网本,并且无法导航。我也注意到老年人用鼠标抓住滚动条。
Obviously one option is to use jQuery.scrollTop() to scroll the individual divs with little arrows or something at the top/bottom of each div, but this does not seem like a great solution because it will be an extra button layer on top of everything. Another option is to just show the scrollbars, but that defeats the whole purpose.
显然,一个选项是使用jQuery.scrollTop()在每个div的顶部/底部用小箭头或某些东西滚动各个div,但这似乎不是一个很好的解决方案,因为它将是一个额外的按钮层在顶部一切。另一种选择是只显示滚动条,但这会破坏整个目的。
How can this problem be solved: to retain the look of the blank rectangle, and allow scrolling without a wheel, with the least amount of extra garbage on the screen?
如何解决这个问题:保留空白矩形的外观,并允许在没有*的情况下滚动,屏幕上的额外垃圾量最少?
1 个解决方案
#1
0
Okay what they have done was create a container div that will hide the scroll bar from sight. Then they use an inner div with the same width as the container except with a padding on the right that is scrollable only on the y.
好吧,他们所做的是创建一个容器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;
}
#1
0
Okay what they have done was create a container div that will hide the scroll bar from sight. Then they use an inner div with the same width as the container except with a padding on the right that is scrollable only on the y.
好吧,他们所做的是创建一个容器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;
}