关注微信公众号【行走在代码行的寻路人】获取Java学习视频及资料。
一、解决IE下不支持overflow: inherit;
解决方法:在父对象属性加上position: absolute;
二、让div浮动跟随滚动条移动
position: fixed;
三、内容置顶
style="vertical-align: top;"
四、固定table的行和列
/**固定在顶部**/
.node_top_fixed{
white-space: nowrap;
z-index: 20;
position: relative;
}
/**固定在左边**/
.node_level_locked{
z-index: 10;
position: relative;
}
/**顶部左边都固定**/
.node_top_left_fixed{
z-index: 30;
position: relative;
}
<script type="text/javascript">
$(document).ready(function(){
$("#base_table_div").scroll(function(){
var yheight = $("#base_table_div").scrollTop();
var xwidth = $("#base_table_div").scrollLeft()
$(".node_top_left_fixed").css("top", yheight-1 + "px");
$(".node_top_left_fixed").css("left", xwidth-1 + "px");
$(".node_top_fixed").css("top", yheight-1 + "px");
$(".node_level_locked").css("left", xwidth-1 + "px");
});
});
</script>
四、自定义滚动条样式
.base_table_div {
margin-left: 10px;
margin-right: 10px;
height:600px;
width:99%;
overflow-x:auto;
overflow-y:auto;
scrollbar-face-color:#EEEEEE;/*那三个小矩形的背景色*/
scrollbar-base-color:#FFFFFF;/*那三个小矩形的前景色*/
scrollbar-arrow-color:#AAAAAA;/*上下按钮里三角箭头的颜色*/
scrollbar-track-color:#FFFFFF;/*滚动条的那个活动块所在的矩形的背景色*/
scrollbar-highlight-color:#EEEEEE;/*那三个小矩形左上padding的颜色*/
scrollbar-shadow-color:#CCCCCC;/*那三个小矩形右下padding的颜色*/
scrollbar-3dlight-color:#CCCCCC;/*那三个小矩形左上border的颜色*/
scrollbar-darkshadow-Color:#CCCCCC;/*那三个小矩形右下border的颜色*/
}