跟随垂直滚动条滚动的DIV实现

最新推荐文章于 2022-09-13 10:15:18 发布

CutBug

最新推荐文章于 2022-09-13 10:15:18 发布

阅读量1.2k

点赞数

文章标签： div css

本文链接：https://blog.csdn.net/cutbug/article/details/3853686

版权

方法一:js实现，缺点：有点闪

<html>
<head>
<script>
function test()
{
document.getElementById("div1").style.top=document.body.scrollTop+100;//100为top:100px
}
</script>
</head>
<body onscroll="test()">
<div id="div1" style="position:absolute;top:100px;border:solid #000 1px;width:100px;height:60px">
广告
</div>
 
 
</body>
</html>

方法二:CSS实现

<html>
<head>
<style>{
overflow: hidden;
padding: 0;
margin: 0;
}
#div1 {
width: 100%;
height: 100%;
overflow: auto;
} #loading {
position: absolute;
top: 100;
left:0;
z-index:800;
}
</style>
</head>
<body>
<div id="div1">
 
 
</div>
<div id="loading" style="width:100%" align="center">
loading............
</div>
</body>
</html>

body

CSS方法相比JS优点是没有闪动

CutBug

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跟随垂直滚动条滚动的DIV实现

方法一:js实现，缺点：有点闪html>head>script>function test(){ document.getElementById("div1").style.top=document.body.scrollTop+100;//100为top:100px}script>head>body onscroll="test()">div id="div1" style="posi
复制链接

扫一扫