87,989
社区成员
发帖
与我相关
我的任务
分享Jquery中关于DIV中滚动的处理，百分求解
小弟遇到一个需要使用JQuery使用的问题，请各位大神，神回复。
需要贴上全部代码，谢谢。
有一个DIV这个DIV里有个超长的Table。
DIV设置了限制宽度，如：300PX
现在需要解决的问题是：
（1）在DIV，设置可以滚动，但只能横向滚动，但是需要隐藏横向滚动条(不显示）。
overflow:auto;
overflow-x:hidden;
（2）采用<a id='scLeft'>以及<a id=‘scRight’>现实现，DIV中Table的移动，就像是滚动条操作一样。
（3）每次移动的Step为1个TH
（4）另外，需要可以设置默认显示的区间，如，默认是：05：00~08：00.就只显示这几个。（向前，向后移动按钮，还是好用的）
PS：最好不要用隐藏方式。
希望，大神们给出代码，十分感谢。
需要贴上全部代码，谢谢。
有一个DIV这个DIV里有个超长的Table。
DIV设置了限制宽度，如：300PX
现在需要解决的问题是：
<div id="div_timegantt" class="div_timegantt">
<table cellpadding="0" cellspacing="0">
<tr class="thead">
<th colspan="6"> 00:00 </th>
<th colspan="6"> 01:00 </th>
<th colspan="6"> 02:00 </th>
<th colspan="6"> 03:00 </th>
<th colspan="6"> 04:00 </th>
<th colspan="6"> 05:00 </th>
<th colspan="6"> 06:00 </th>
<th colspan="6"> 07:00 </th>
<th colspan="6"> 08:00 </th>
<th colspan="6"> 09:00 </th>
<th colspan="6"> 10:00 </th>
</tr>
<!-- 1Row -->
<tr class="tbody">
<!-- 00:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 01:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 02:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 03:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 04:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 05:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 06:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 07:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 08:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 09:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 10:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
（1）在DIV，设置可以滚动，但只能横向滚动，但是需要隐藏横向滚动条(不显示）。
overflow:auto;
overflow-x:hidden;
（2）采用<a id='scLeft'>以及<a id=‘scRight’>现实现，DIV中Table的移动，就像是滚动条操作一样。
（3）每次移动的Step为1个TH
（4）另外，需要可以设置默认显示的区间，如，默认是：05：00~08：00.就只显示这几个。（向前，向后移动按钮，还是好用的）
PS：最好不要用隐藏方式。
希望，大神们给出代码，十分感谢。
...全文
请发表友善的回复…
发表回复
fcqm8888 2016-04-11
- 打赏
- 举报
游解答了吗？看来问题比较棘手啊。
斯洛文尼亚旅游 2014-05-28
- 打赏
- 举报
第四点只需要指定开始区间就好了，后续的显示由容器的宽度来决定
<style>
.div_timegantt{overflow:auto;overflow-x:hidden;width:300px;}
</style>
<div id="div_timegantt" class="div_timegantt">
<table cellpadding="0" cellspacing="0">
<tr class="thead">
<th colspan="6"> 00:00 </th>
<th colspan="6"> 01:00 </th>
<th colspan="6"> 02:00 </th>
<th colspan="6"> 03:00 </th>
<th colspan="6"> 04:00 </th>
<th colspan="6"> 05:00 </th>
<th colspan="6"> 06:00 </th>
<th colspan="6"> 07:00 </th>
<th colspan="6"> 08:00 </th>
<th colspan="6"> 09:00 </th>
<th colspan="6"> 10:00 </th>
</tr>
<!-- 1Row -->
<tr class="tbody">
<!-- 00:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 01:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 02:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 03:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 04:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 05:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 06:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 07:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 08:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 09:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 10:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<a id='scLeft' href='#'>左移</a> <a id='scRight' href='#'>右移</a>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var nowTH = 0, dv = $('#div_timegantt'), ths = dv.find('th'), thNum = ths.size(), maxScrollLeft = ths.parent().width() - dv.width()
, startTH = '05:00';
$('#scLeft,#scRight').click(function () {
if (arguments.length < 2) nowTH += this.id == 'scLeft' ? -1 : 1;
if (nowTH < 0) { nowTH = 0; return false }
var scrollLeft = 0;
ths.each(function (i, el) { if (i >= nowTH) return false; scrollLeft += ths.eq(i).width(); });
if (scrollLeft > maxScrollLeft) nowTH--;
dv.attr('scrollLeft', scrollLeft);
return false;
});
$(function () {
if (startTH != '') {
nowTH = ths.filter(':contains("' + startTH + '")').index();
if (nowTH != -1) $('#scLeft').trigger('click', 'init');
else nowTH = 0; //找不到开始的th对象则还是从0开始
}
});
</script>
</body>
</html>码无边 2014-05-28
- 打赏
- 举报
直接加iframe 关于水平和竖直的滚动条就很好解决。
