码迷,mamicode.com
首页 > 其他好文 > 详细

滚动条相关1

时间:2014-09-22 19:11:23      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   使用   ar   div   sp   cti   

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

标签:style   blog   color   io   使用   ar   div   sp   cti   

原文地址:http://www.cnblogs.com/tianmahygj/p/3986425.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!