滚动时，外部div垂直和内部div水平，但也隐藏滚动条 [英] Scrolling with outer div vertically and inner div horizontally but also hiding the scrollbars
本文介绍了滚动时，外部div垂直和内部div水平，但也隐藏滚动条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在尝试将滚动应用于我的HTML时遇到问题。
这个想法是有一个网格。其中可以垂直滚动。
但是我也想让该网格的部分水平滚动。
作为奖励，我不想要任何的滚动条可见，我将使用它在Android上使用WebView。
我在使用多个组件溢出，但我通常最终得到： p>
- 可以水平滚动整个网格，而不只是Datadiv。
- 有2
我的HTML：
< button id ='scroll_up'>向上滚动< / button>
< button id ='scroll_down'>向下滚动< / button>
< button id ='scroll_left'>向左滚动< / button>
< button id ='scroll_right'>向右滚动< / button>
< div id =grid>
< div id =header>
< a id ='row_header'>部分标题< / a>
< a class =row> 1< / a>
< a class =row> 2< / a>
< a class =row> 3< / a>
< a class =row> 4< / a>
< a class =row> 5< / a> ;.
< a class =row> 6< / a>
< a class =row> 7< / a>
< a class =row> 8< / a>
< a class =row> 9< / a>
< a class =row> 10< / a>
< a class =row> 11< / a>
< a class =row> 12< / a>
< a class =row> 13< / a>
< a class =row> 14< / a>
< a class =row> 15< / a>
< a class =row> 16< / a>
< a class =row> 17< / a>
< a class =row> 18< / a>
< a class =row> 19< / a>
< a class =row> 20< / a>
< / div>
< div id =data>
< div id =column_header>
< a class =header> h1< / a>
< a class =header> h2< / a>
< a class =header> h3< / a>
< a class =header> h4< / a>
< a class =header> h5< / a>
< a class =header> h6< / a>
< a class =header> h7< / a>
< a class =header> h8< / a>
< a class =header> h9< / a>
< a class =header> h10< / a>
< a class =header> h11< / a>
< a class =header> h12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data>数据4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data>数据5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data>数据11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data>数据2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< / div>
< / div>
CSS：
body {
font：18px arial，sans-serif;
}
#grid {
display：block;
position：absolute;
top：100px;
left：0px;
width：100％;
height：517px;
margin：0;
}
#header {
display：inline-block;
width：25％;
height：100％;
float：left;
overflow：auto;
}
#data {
float：left;
display：inline-block;
width：75％;
height：100％;
overflow：auto;
}
.row，#row_header {
display：block;
padding-left：8px;
height：50px;
border：1px solid black;
text-align：center;
line-height：50px;
}
.row_data，#column_header {
display：inline-block;
white-space：nowrap;
width：100％;
}
.data，.header {
display：inline-block;
border：1px solid black;
width：20％;
}
#row_header，.header {
height：30px;
line-height：30px;
}
#row_header，#column_header {
text-align：center;
}
.data，.row {
height：50px;
text-align：center;
line-height：50px;
}
和我的JS：
$（document）.ready（function（）{
$（'＃scroll_up'）click（function（）{
var height = $ '#grid'）。height（）;
$（'＃grid'）。scrollTo（' - ='+ height +'px'，{axis：'y'}）;
} ;
$（'＃scroll_down'）。click（function（）{
var height = $（'＃grid'）。height（）;
$（' grid'）。scrollTo（'+ ='+ height +'px'，{axis：'y'}）;
}）;
$（'＃scroll_left'）。 （function（）{
var width = $（'＃data'）。width（）;
$（'＃data'）。scrollTo（' - ='+ width +'px'，{ axis：'x'};;
}）;
$（'＃scroll_right'）click（function（）{
var width = ）.width（）;
$（'＃data'）。scrollTo（'+ ='+ width +'px'，{axis：'x'}）;
}）;
}）;
为了方便起见： http://jsfiddle.net/xFPtj/1/
我应该做什么提示？
解决方案
我希望我能正确理解你的问题，从我的理解我想你想要的东西， p>
我使用一个溢出的技巧隐藏了滚动条，它可以被认为是一个黑客，但它使用纯HTML + CSS（不需要JavaScript）
如果你好奇，可以阅读更多这里。
不幸的是，我不得不加入一些
为了将来的参考，修改HTML ：
< div class =buttons>
< button id ='scroll_up'>向上滚动< / button>
< button id ='scroll_down'>向下滚动< / button>
< button id ='scroll_left'>向左滚动< / button>
< button id ='scroll_right'>向右滚动< / button>
< / div>
< div id =grid>
< div id =header-container>
< div id =header>
< a id ='row_header'>部分标题< / a>
< a class =row> 1< / a>
< a class =row> 2< / a>
< a class =row> 3< / a>
< a class =row> 4< / a>
< a class =row> 5< / a>
< a class =row> 6< / a>
< a class =row> 7< / a>
< a class =row> 8< / a>
< a class =row> 9< / a>
< a class =row> 10< / a>
< a class =row> 11< / a>
< a class =row> 12< / a>
< a class =row> 13< / a>
< a class =row> 14< / a>
< a class =row> 15< / a>
< a class =row> 16< / a>
< a class =row> 17< / a>
< a class =row> 18< / a>
< a class =row> 19< / a>
< a class =row> 20< / a>
< / div>
< / div>
< div id =data-container>
< div id =data>
< div id =column_header>
< a class =header> h1< / a>
< a class =header> h2< / a>
< a class =header> h3< / a>
< a class =header> h4< / a>
< a class =header> h5< / a>
< a class =header> h6< / a>
< a class =header> h7< / a>
< a class =header> h8< / a>
< a class =header> h9< / a>
< a class =header> h10< / a>
< a class =header> h11< / a>
< a class =header> h12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data>数据7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data>数据7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data>数据9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data> data 8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
< a class =data> data 1< / a>
< a class =data> data 2< / a>
< a class =data> data 3< / a>
< a class =data> data 4< / a>
< a class =data> data 5< / a>
< a class =data> data 6< / a>
< a class =data> data 7< / a>
< a class =data>数据8< / a>
< a class =data> data 9< / a>
< a class =data> data 10< / a>
< a class =data> data 11< / a>
< a class =data> data 12< / a>
< / div>
< div class =row_data>
<a class=\"data\">data 1</a>
<a class=\"data\">data 2</a>
<a class=\"data\">data 3</a>
<a class=\"data\">data 4</a>
<a class=\"data\">data 5</a>
<a class=\"data\">data 6</a>
<a class=\"data\">data 7</a>
<a class=\"data\">data 8</a>
<a class=\"data\">data 9</a>
<a class=\"data\">data 10</a>
<a class=\"data\">data 11</a>
<a class=\"data\">data 12</a>
< / div>
<div class=\"row_data\">
<a class=\"data\">data 1</a>
<a class=\"data\">data 2</a>
<a class=\"data\">data 3</a>
<a class=\"data\">data 4</a>
<a class=\"data\">data 5</a>
<a class=\"data\">data 6</a>
<a class=\"data\">data 7</a>
<a class=\"data\">data 8</a>
<a class=\"data\">data 9</a>
<a class=\"data\">data 10</a>
<a class=\"data\">data 11</a>
<a class=\"data\">data 12</a>
< / div>
<div class=\"row_data\">
<a class=\"data\">data 1</a>
<a class=\"data\">data 2</a>
<a class=\"data\">data 3</a>
<a class=\"data\">data 4</a>
<a class=\"data\">data 5</a>
<a class=\"data\">data 6</a>
<a class=\"data\">data 7</a>
<a class=\"data\">data 8</a>
<a class=\"data\">data 9</a>
<a class=\"data\">data 10</a>
<a class=\"data\">data 11</a>
<a class=\"data\">data 12</a>
< / div>
<div class=\"row_data\">
<a class=\"data\">data 1</a>
<a class=\"data\">data 2</a>
<a class=\"data\">data 3</a>
<a class=\"data\">data 4</a>
<a class=\"data\">data 5</a>
<a class=\"data\">data 6</a>
<a class=\"data\">data 7</a>
<a class=\"data\">data 8</a>
<a class=\"data\">data 9</a>
<a class=\"data\">data 10</a>
<a class=\"data\">data 11</a>
<a class=\"data\">data 12</a>
< / div>
<div class=\"row_data\">
<a class=\"data\">data 1</a>
<a class=\"data\">data 2</a>
<a class=\"data\">data 3</a>
<a class=\"data\">data 4</a>
<a class=\"data\">data 5</a>
<a class=\"data\">data 6</a>
<a class=\"data\">data 7</a>
<a class=\"data\">data 8</a>
<a class=\"data\">data 9</a>
<a class=\"data\">data 10</a>
<a class=\"data\">data 11</a>
<a class=\"data\">data 12</a>
< / div>
<div class=\"row_data\">
<a class=\"data\">data 1</a>
<a class=\"data\">data 2</a>
<a class=\"data\">data 3</a>
<a class=\"data\">data 4</a>
<a class=\"data\">data 5</a>
<a class=\"data\">data 6</a>
<a class=\"data\">data 7</a>
<a class=\"data\">data 8</a>
<a class=\"data\">data 9</a>
<a class=\"data\">data 10</a>
<a class=\"data\">data 11</a>
<a class=\"data\">data 12</a>
< / div>
<div class=\"row_data\">
<a class=\"data\">data 1</a>
<a class=\"data\">data 2</a>
<a class=\"data\">data 3</a>
<a class=\"data\">data 4</a>
<a class=\"data\">data 5</a>
<a class=\"data\">data 6</a>
<a class=\"data\">data 7</a>
<a class=\"data\">data 8</a>
<a class=\"data\">data 9</a>
<a class=\"data\">data 10</a>
<a class=\"data\">data 11</a>
<a class=\"data\">data 12</a>
< / div>
< / div>
< / div>
< / div>
And amended CSS (the JavaScript is unchanged):
body {
font: 18px arial,sans-serif;
overflow：hidden;
}
#grid {
clear: left;
display：block;
position：absolute;
right: -16px;
top: 100px;
left：0px;
bottom：0;
overflow-y：auto;
margin：0;
}
#header-container {
float: left;
overflow：hidden;
width：25％;
}
#header {
margin: 16px 0 0 0;
overflow：auto;
width：100％;
}
#data-container {
float: left;
overflow：hidden;
width：75％;
}
#data {
margin: 16px 0 -16px 10px;
overflow：auto;
width：100％;
}
.row, #row_header {
display: block;
padding-left：8px;
height：50px;
border：1px solid black;
text-align：center;
line-height：50px;
}
.row_data, #column_header {
display: inline-block;
white-space：nowrap;
width：100％;
}
.data, .header {
display: inline-block;
border：1px solid black;
width：20％;
}
#row_header, .header {
height: 30px;
line-height：30px;
}
#row_header, #column_header {
text-align: center;
}
.data, .row {
height: 50px;
text-align：center;
line-height：50px;
}
You might want to double check the CSS as I haven’t, it may be a little messy.
I'm having problems trying to apply scrolling to my HTML. The idea is to have a grid. Which can be scrolled vertically. But I also want to have a part of that grid be scrolled horizontally.
As a bonus I don't want any of the scrollbars visible, I will using it on Android using a WebView.
I'm fiddling with the overflow on several components, but I usually end up with:
- able to scroll the whole grid horizontally, instead of only the 'Data' div.
- have 2 seperate vertical scroll bars for both 'data' and 'header' divs.
My HTML:
<button id='scroll_up'>scroll up</button>
<button id='scroll_down'>scroll down</button>
<button id='scroll_left'>scroll left</button>
<button id='scroll_right'>scroll right</button>
<div id="grid">
<div id="header">
<a id='row_header'>Some Header</a>
<a class="row">1</a>
<a class="row">2</a>
<a class="row">3</a>
<a class="row">4</a>
<a class="row">5</a>
<a class="row">6</a>
<a class="row">7</a>
<a class="row">8</a>
<a class="row">9</a>
<a class="row">10</a>
<a class="row">11</a>
<a class="row">12</a>
<a class="row">13</a>
<a class="row">14</a>
<a class="row">15</a>
<a class="row">16</a>
<a class="row">17</a>
<a class="row">18</a>
<a class="row">19</a>
<a class="row">20</a>
</div>
<div id="data">
<div id="column_header">
<a class="header">h1</a>
<a class="header">h2</a>
<a class="header">h3</a>
<a class="header">h4</a>
<a class="header">h5</a>
<a class="header">h6</a>
<a class="header">h7</a>
<a class="header">h8</a>
<a class="header">h9</a>
<a class="header">h10</a>
<a class="header">h11</a>
<a class="header">h12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
</div>
</div>
The CSS:
body {
font: 18px arial,sans-serif;
}
#grid {
display: block;
position: absolute;
top: 100px;
left: 0px;
width: 100%;
height: 517px;
margin: 0;
}
#header {
display: inline-block;
width: 25%;
height: 100%;
float: left;
overflow: auto;
}
#data {
float: left;
display: inline-block;
width: 75%;
height: 100%;
overflow: auto;
}
.row, #row_header {
display: block;
padding-left: 8px;
height: 50px;
border: 1px solid black;
text-align: center;
line-height: 50px;
}
.row_data, #column_header {
display: inline-block;
white-space: nowrap;
width: 100%;
}
.data, .header {
display: inline-block;
border: 1px solid black;
width: 20%;
}
#row_header, .header {
height: 30px;
line-height: 30px;
}
#row_header, #column_header {
text-align: center;
}
.data, .row {
height: 50px;
text-align: center;
line-height: 50px;
}
And my JS:
$(document).ready(function() {
$('#scroll_up').click(function() {
var height = $('#grid').height();
$('#grid').scrollTo( '-=' + height + 'px', { axis:'y' } );
});
$('#scroll_down').click(function() {
var height = $('#grid').height();
$('#grid').scrollTo( '+=' + height + 'px', { axis:'y' } );
});
$('#scroll_left').click(function() {
var width = $('#data').width();
$('#data').scrollTo( '-=' + width + 'px', { axis:'x' } );
});
$('#scroll_right').click(function() {
var width = $('#data').width();
$('#data').scrollTo( '+=' + width + 'px', { axis:'x' } );
});
});
For convienence: http://jsfiddle.net/xFPtj/1/
Any tips for what I should do?
解决方案
I hope I've understood your question correctly, from what I understand I think you want something like the following:
I've hidden the scrollbars using an overflow trick, it could be considered somewhat of a hack but it uses pure HTML + CSS (no JavaScript needed) and is easily adjustable whilst working cross browser.
If you're curious, can read more about it here.
Unfortunately, I've had to include a couple of div's in there for the overflow trick, I don't see this as a major drawback though.
For future reference, amended HTML:
<div class="buttons">
<button id='scroll_up'>scroll up</button>
<button id='scroll_down'>scroll down</button>
<button id='scroll_left'>scroll left</button>
<button id='scroll_right'>scroll right</button>
</div>
<div id="grid">
<div id="header-container">
<div id="header">
<a id='row_header'>Some Header</a>
<a class="row">1</a>
<a class="row">2</a>
<a class="row">3</a>
<a class="row">4</a>
<a class="row">5</a>
<a class="row">6</a>
<a class="row">7</a>
<a class="row">8</a>
<a class="row">9</a>
<a class="row">10</a>
<a class="row">11</a>
<a class="row">12</a>
<a class="row">13</a>
<a class="row">14</a>
<a class="row">15</a>
<a class="row">16</a>
<a class="row">17</a>
<a class="row">18</a>
<a class="row">19</a>
<a class="row">20</a>
</div>
</div>
<div id="data-container">
<div id="data">
<div id="column_header">
<a class="header">h1</a>
<a class="header">h2</a>
<a class="header">h3</a>
<a class="header">h4</a>
<a class="header">h5</a>
<a class="header">h6</a>
<a class="header">h7</a>
<a class="header">h8</a>
<a class="header">h9</a>
<a class="header">h10</a>
<a class="header">h11</a>
<a class="header">h12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
<div class="row_data">
<a class="data">data 1</a>
<a class="data">data 2</a>
<a class="data">data 3</a>
<a class="data">data 4</a>
<a class="data">data 5</a>
<a class="data">data 6</a>
<a class="data">data 7</a>
<a class="data">data 8</a>
<a class="data">data 9</a>
<a class="data">data 10</a>
<a class="data">data 11</a>
<a class="data">data 12</a>
</div>
</div>
</div>
</div>
And amended CSS (the JavaScript is unchanged):
body {
font: 18px arial,sans-serif;
overflow: hidden;
}
#grid {
clear: left;
display: block;
position: absolute;
right: -16px;
top: 100px;
left: 0px;
bottom: 0;
overflow-y: auto;
margin: 0;
}
#header-container {
float: left;
overflow: hidden;
width: 25%;
}
#header {
margin: 16px 0 0 0;
overflow: auto;
width: 100%;
}
#data-container {
float: left;
overflow: hidden;
width: 75%;
}
#data {
margin: 16px 0 -16px 10px;
overflow: auto;
width: 100%;
}
.row, #row_header {
display: block;
padding-left: 8px;
height: 50px;
border: 1px solid black;
text-align: center;
line-height: 50px;
}
.row_data, #column_header {
display: inline-block;
white-space: nowrap;
width: 100%;
}
.data, .header {
display: inline-block;
border: 1px solid black;
width: 20%;
}
#row_header, .header {
height: 30px;
line-height: 30px;
}
#row_header, #column_header {
text-align: center;
}
.data, .row {
height: 50px;
text-align: center;
line-height: 50px;
}
You might want to double check the CSS as I haven't, it may be a little messy.
这篇关于滚动时，外部div垂直和内部div水平，但也隐藏滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
