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

很久之前接触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);            }        }    }

上面这个代码有时会停在一半不能下滑，于是，又改了一下，

 

window.onscroll = function (e) {        var scrollT = $(window).scrollTop() || $('body').scrollTop();        if (window.innerHeight <= (toolTop + $('.rightTool').height())) {            $('.rightTool').css({                'top': $(window).height() - $('.rightTool').height() + $(window).scrollTop() - 8            })        } else {            $('.rightTool').css('top', toolTop + scrollT);        }            console.log('文档高度'+bodyH)            console.log('窗口高度'+window.innerHeight)            console.log('滚动高度'+scrollT)            console.log(bodyH-window.innerHeight - scrollT+252)        if (myBrowser()=="Chrome"){            if (bodyH-window.innerHeight - scrollT+252 <= 0) {                var nowVal = bodyH-window.innerHeight - scroll+240;                $(window).scrollTop(nowVal);            }        }    }

浏览器计算出来的结果是有误差的，所有有时候我们要做好防止这些误差的准备

当前chrome版本：版本 62.0.3202.94（正式版本） （64 位）

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

由于页面内容较多，容易发生第一次获取文档高度不正确的情况，并且body的高度如果直接获取的话也会出现问题，所以，决定做如下改良

1、把固定高度的元素放在一个和body相同高度的另一个盒子中

<!-- 右侧工具框 --><div id="rightZone" style="position:absolute;top:0;right:0;height:100%;width:0">    <ul class="rightTool list-unstyled text-info text-center">        <li>            <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=767521025&site=qq&menu=yes">                <img src="{IMG_PATH}qiphon/qq.png" alt="QQ咨询">            </a>            <p>QQ咨询</p>        </li>        <li class="totop">            <a href="javascript:scroll(0,0)">                <img src="{IMG_PATH}qiphon/totop.png" alt="回到顶部">            </a>            <p>回到顶部</p>        </li>    </ul></div>

2、在页面滚动的时候，不断获取页面的高度

$(function(){         $(window).scroll(function (e) {            //body的高度            var bodyH = $('#rightZone').height();            var scrollT = $(window).scrollTop() || $('body').scrollTop();            //右侧工具栏高度            var toolH = $('.rightTool').height();            //窗口高度            var winH = window.innerHeight;            if (winH <= (toolTop + toolH)) {                $('.rightTool').css({                    'top': winH - toolH + scrollT - 8                })                if (bodyH-winH - scrollT<= 0) {                    var nowVal = bodyH-winH;                    $(window).scrollTop(nowVal);                }            } else {                $('.rightTool').css('top', toolTop + scrollT);            }        })    }); 

这样就能避免body元素的高度获取不正确了