网页中添加模拟滚动条

网页中有一个table表格,表格呈现的数据字段比较多,为了数据展示的效果,给每一个字段列都设置了宽度,这样虽然每一个列均可以显示较为理想的效果,可是整个table的就会超出当前屏幕的宽度,整个时候我给table加了个容器,就是给table外面加了一层div,把table给包裹了起来.这样table超出屏幕宽度时我让它的容器出现滚动条,以便让全部的字段能够经过拖动滚动条的形式展现出来.

这样的效果,在当前列表数据量大的时候,而当前又只是看列表数据的顶部数据.若是是在mac上,灵敏的触摸板能够很方便的华东滚动条,可是若是到了windows上,它的触摸板没有那么灵敏,只能把页面滚动到页面底部使用鼠标拖动滚动条,使用起来极不友好.这个时候我添加了一个空模块,专门用来存放滚动条,当数据量大而且当前在看顶部数据的时候,我就把滚动条固定在浏览器的底部.

像这个样子的,在windows或者mac上均可以很好的使用,mac上直接使用触摸板能够滚动table表格,windows上或者其余电脑上,能够拖动下面的鼠标滚动表格,方便使用.

实现上,使用table或者它的容器的滚动条确定是不行的,咱们能够经过写一个空的标签来专门实现这个滚动条,咱们暂且称这个乘放滚动条的空标签为滚动条容器.咱们设置滚动条容器的宽度为table的宽度.table容器也设置一个宽度,超出则出现滚动条.同时咱们设置table容器滚动条和滚动条容器滚动关联.

<!--滚动条容器-->
<div class="scroll-sim">
    <div class="inn"></div>
</div>

// 表格容器滚动条和滚动条容器关联滚动效果
$(".sco").scroll(function() {
    $(".scroll-sim").scrollLeft($(".sco").scrollLeft());
});
$(".scroll-sim").scroll(function() {
    $(".sco").scrollLeft($(".scroll-sim").scrollLeft());
});

有一点须要注意的是,safari浏览器上,除了要给父容器设置overflow-x:auto外,还要给自己也设置overflow-x:scroll;属性才能够出现滚动条.