最近发现一个问题,就是我博客http://bayaojiu.com首页中左侧栏在IE/edge浏览器下向下滚动屏幕的时候,出现上下跳动,最后问题定位到了“盒子的position:fixed”上

google了一下后,一篇文章上说,原因是ie/edge是默认开启了平滑滚动,你可以关闭后看看盒子还有没有闪跳

开发者解决办法

自己设置关闭平滑滚动是自欺欺人,所以我们要加入一段代码,使它不会继续跳闪

方法一

①首先要确保自己html链入了JQ文件

②加入js语句

 if(navigator.userAgent.match(/MSIE 10/i) || navigator.userAgent.match(/Trident\/7\./) || navigator.userAgent.match(/Edge\/12\./)) {//判断浏览器类型
        $('body').on("mousewheel", function () {//当滚动时触发
            event.preventDefault();//取消预定的动作
            var wd = event.wheelDelta;
            var csp = window.pageYOffset;
            window.scrollTo(0, csp - wd);//直接跳到滚动一次后的地方
        });
    }

 

方法二(推荐)

确保position:fixed的盒子的子元素没有设置position:fixed,子元素包含的子元素也要检查

EX:
修改前
<div style="position:fixed">
    <p style="position:fixed">The title</p>
</div>

修改后
<div style="position:fixed">
    <div style="position:relative">
        <p style="position:absolute">The title</p>
    </div>
</div>

 

参考文章:http://huangzhiqun.com/life/ie11-bg-fixed-bug.htmlhttp://social.msdn.microsoft.com/Forums/https://stackoverflow.com/questions/19377810/ie-10-11-make-fixed-backgrounds-jump-when-scrolling-with-mouse-wheel/23339971#23339971

您或许感兴趣

[2017-10-15]wordpress使用Crayon Syntax Highlighter 自定义文本背景

发表评论

电子邮件地址不会被公开。