首页 > 代码库 > 滚动条相关1

滚动条相关1

1.页面文档滚动条 获取和判断

            //1.获取浏览器可视区域的高度            $(window).resize(function () {                //使用js                //var clientHeight = scrollHelper.getClientHeight();                //使用 jquery                var clientHeight = $(window).height();                $(".divFixed").text(clientHeight);            });            //2.获取浏览器文档的高度            $(window).resize(function () {                //使用js                //var docHeight = scrollHelper.getScrollHeight();                //使用jQuery                var docHeight = $(document).height();                $(".divFixed").text(docHeight);            });
            //3.判断当前 滚动条是否 最高,或最低            $(window).scroll(function () {                //1.获取当前滚动条位置                var scrollTop = $(window).scrollTop();                var difference = $(document).height() - $(window).height();                if (scrollTop == 0) {                    $(".divFixed").text("滚动条到了顶端");                }                else if (scrollTop == difference) {                    $(".divFixed").text("滚动条到了底端");                } else {                    $(".divFixed").text(scrollTop);                }            });            //4.jquery 动画滚动到 浏览器 顶端            $(‘.divFixed‘).click(function () {                $(‘body,html‘).stop(true, false).animate({ scrollTop: 0 }, 1500);            });            //5.jquery 动画滚动套 浏览器 底端            $(‘.divFixed‘).click(function () {                var difference = $(document).height() - $(window).height();                $(‘body,html‘).stop(true, false).animate({ scrollTop: difference }, 1500);            });

2.Div滚动条 获取和判断

            var divOne = $(‘.divOne‘);            var divTwo = $(‘.divTwo‘);            //1.获取div的滚动条的            $(".divTwo").scroll(function (e) {                var scrollTop = divTwo.scrollTop();                ////2.获取div的 内容的高度(目前不可用)                //var scrollHeight = divTwo.innerHeight();                divOne.text(scrollTop);            });            //2.判断滚动条 是否到了底部            var scrollHeight = 0;//滚动条距离总长            var scrollTop = 0;//当前滚动条位置            $(".divTwo").scroll(function () {                var height = $(this).height();                scrollHeight = $(this)[0].scrollHeight;                scrollTop = $(this).scrollTop();                if (scrollTop + height >= scrollHeight) {                    divOne.text("滚到底部了");                }                else if (scrollTop == 0) {                    divOne.text("到顶端了");                }            });

 

滚动条相关1