div内容超出滚动，不显示滚动条

时间：2024-03-05 07:39:11

方法一：修改滚动条颜色

Body { 
scrollbar-arrow-color: greenyellow; 
scrollbar-face-color: greenyellow; 
scrollbar-3dlight-color: greenyellow; 
scrollbar-highlight-color: greenyellow; 
scrollbar-shadow-color: greenyellow; 
scrollbar-darkshadow-color: greenyellow; 
scrollbar-track-color: greenyellow; 
} 
将颜色设置的和div颜色一样

方法二：div包裹

<!DOCTYPE html> 
<html> 
<head> 
<title>Test1-模块-CSS实现无滚动条滚动</title> 

<meta charset="UTF-8" >
<style type="text/css">
    .wrap{width:500px;height:500px;overflow:hidden;}
    .box1{width:500px;height:500px;margin:0 20px;overflow-y:scroll;overflow-x:hidden;background-color:#eee;}
    .box2{height:1000px;}
</style>
</head>

<body>
<div class="wrap">
    <div class="box1">
        <div class="box2">
            <p>box1和box2实现在一定高度的节点(box1)里展示大于该高度的节点(box2)</p>
            <p>box2里面滚动了多少可以通过box1.scrollTop来获取</p>
            <p style="margin-bottom:850px;">wrap作为最外层的节点，作用是用来隐藏滚动条的</p>
            <p id="end">The-end</p>
        </div>
    </div>
</div>
</body>

</html>

方法就是box2和wrap同一个框框显示，可以滚动的box1向右移动一点，这样就可以滚动但是滚动条有不会显示出来，被挤掉了。。。

相关文章