绝对定位元素随滚动条滑动无延时不闪烁的解决办法!

末蓝、 2022-06-13 05:15 182阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    <meta name="Author" content="whidy">
    <title>绝对定位元素随滚动条滑动不闪烁</title>
    <style>
    body {
    	background: #eee;
    	margin: 0;
    	padding: 0;
    }
    .container {
    	width: 1000px;
    	height: 5000px;
    	background: #ddd;
    	margin: 0 auto;
    }
    .wrapper {
    	height: 400px;
    	width: 998px;
    	background: #ccc;
    	border: 1px solid #aaa;
    	position: relative;
    	top:5%;
    	overflow: hidden;
    }
    .fixPos {
    	position: fixed;/* 解决CHROME不闪动的问题,不信你删了试试! */
    	visibility:hidden;
    }
    .content {
    	width:940px;
    	font: 100%/200% "Microsoft YaHei";
    	padding:0 30px;
    	position: absolute;
    	top: 50px;
    }
    .content h1 {
    	font:bold 150%/200% "Microsoft YaHei";
    }
    </style>
    </head>
    <body>
    <div class="container">
    	<div class="wrapper">
    		<div class="fixPos"></div>
    		<div class="content" id="con">
    			<h1>Solute an absolute elements scroll width no delay, no blink!</h1>
    			<P>I love you so much, whidy!</P>
    			<P>And you?</P>
    		</div>
    	</div>
    </div>
    <script type="text/javascript">
    window.onscroll = function(){
    	var con=document.getElementById('con');
    	// var scrollTopValue = document.documentElement.scrollTop || document.body.scrollTop;
    	// con.style.top = scrollTopValue/2 + 50 + 'px';
    	if(!document.body.scrollTop){//for IE 6,7,8 (8+版本未测试)
    		con.style.top = document.documentElement.scrollTop/2 + 50 + 'px';
    	} else {
    		con.style.top = document.body.scrollTop/2 + 50 + 'px';
    	}
    }
    </script>
    </body>
    </html>

这个效果就是某个内部元素随着浏览器滚动条上下移动,听起来不错哦~加个fixed属性?但是这个效果有几个条件限制,当这个元素超出父级元素高度后,隐藏,这个是fixed无法做到了,那么必然要用相对父级的元素进行绝对定位了.通过JS在每次触发浏览器滚动事件(window.onscroll)的时候进行一次重新定位.

转载地址：[http://www.whidy.net/absolute-element-scroll-without-blink.html\#more-1884][http_www.whidy.net_absolute-element-scroll-without-blink.html_more-1884]

[http_www.whidy.net_absolute-element-scroll-without-blink.html_more-1884]: http://www.whidy.net/absolute-element-scroll-without-blink.html#more-1884