首页 > 滚动鼠标滚轮 让div缓冲运动到页面中间,chrome下没有问题,ie下不执行。求解决办法以及原因?

滚动鼠标滚轮 让div缓冲运动到页面中间,chrome下没有问题,ie下不执行。求解决办法以及原因?

startMove函数是我看了视频后推导了一遍。
想着试着用在其他地方看看。刚刚我试了不用getStyle获取top ,直接用offsetTop,发现ie下又可以用了,不解。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{height:2000px;}
        #div1{background:red;width: 100px;height: 100px; position: absolute;}    

    </style>
</head>
<body>
<div id="div1"></div>

<script>
window.onload = function(){

     window.onscroll = function(){
        var Adiv = document.getElementById('div1');    
        var scrollTop =    document.documentElement.scrollTop || document.body.scrollTop;
        var tar = Math.ceil((document.documentElement.clientHeight - Adiv.offsetHeight)/2)+parseInt(scrollTop);
        startMove(Adiv,'top',tar)

    }    

}

function startMove(obj,attr,target){
        clearInterval(obj.timer);
        var ispeed = '';

        obj.timer = setInterval(function(){
            ispeed =(target-parseInt(getStyle(obj,attr)))/6
            ispeed = ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);
            var psn = parseInt(getStyle(obj,attr))+ispeed;
            if(psn>target&&ispeed>0 || psn<target&&ispeed<0) {
                psn = target;
            }
            obj.style[attr] = psn + 'px';        
            if(psn == target){
                clearInterval(obj.timer);
            }
            document.title = getStyle(obj,attr)
            
            
        },30)}

function getStyle(obj,attr){
            return  obj.currentStyle? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr] ;
            }


</script>    
</body>
</html>

你的代码中getStyle这个方法在IE下获取到的值是undefined,所以导致在IE下有问题,在IE下,获取到的Adiv.currentStyle.top的值是auto,你需要在CSS中写上top:0这样,IE才会获取到top值,从而正确得出getStyle的值,你可以试试。

【热门文章】
【热门文章】