您现在的位置:首页 >> 前端 >> 内容

相对定位随滚动条滚动可以无限下滑的问题解决办法

时间:2017/12/4 10:27:17 点击:

  核心提示:很久之前接触js的时候就遇到过这个问题,当时老是给出的答案是使用固定定位,今天写页面突然又遇到了这个问题,感觉很差异,于是有了下面的解决办法 // 右侧工具栏固定var toolTop = $(.ri...

很久之前接触js的时候就遇到过这个问题,当时老是给出的答案是使用固定定位,今天写页面突然又遇到了这个问题,感觉很差异,于是有了下面的解决办法

 // 右侧工具栏固定
    var toolTop = $('.rightTool').offset().top;     //定位工具栏的距离顶部的距离
    var bodyH = $('body').height();		//body的高度
    // 判断浏览器
    function myBrowser() {
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        var isOpera = userAgent.indexOf("Opera") > -1;
        if (isOpera) {
            return "Opera"
        }; //判断是否Opera浏览器
        if (userAgent.indexOf("Firefox") > -1) {
            return "FF";
        } //判断是否Firefox浏览器
        if (userAgent.indexOf("Chrome") > -1) {
            return "Chrome";
        }
        if (userAgent.indexOf("Safari") > -1) {
            return "Safari";
        } //判断是否Safari浏览器
        if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
            return "IE";
        }; //判断是否IE浏览器
    }
    window.onscroll = function (e) {
        var scrollT = $(window).scrollTop() || $('body').scrollTop();
        if ($(window).height() <= (toolTop + $('.rightTool').height())) {    //当工具栏大于屏幕的高度的时候让其底部显示在工具栏的底部,这样就不会无限撑大body的高度了
            $('.rightTool').css({
                'top': $(window).height() - $('.rightTool').height() + $(window).scrollTop() - 8
            })
        } else {
            $('.rightTool').css('top', toolTop + scrollT);
        }
        if (myBrowser()=="Chrome"){   //目前只发现chrome有无限下滑的现象,已反馈(但不知道人家能不能给解决哈哈)所以多次测试发现多给个235的高度能解决
            if ($(window).height() + scrollT >= (bodyH + 235)) {
                $(window).scrollTop(bodyH - $(window).height() + 235);
            }
        }
    }

当前chrome版本:版本 62.0.3202.94(正式版本) (64 位)

我先在用的其他浏览器未发现此现象

作者:网络 来源:齐枫的博客