您确实懂了呢,获取页面成分的属性值

滚动,你真的懂了吗

2015/10/07 · JavaScript · 滚动

原文出处: IMWEB - coverguo   

在业务中,页面滚动的场景十分常见,

因此对于滚动的充分了解,可以让我们提高开发的效率!

此文实现了如下效果:
jquery获得窗口高宽,文档高宽值。
通过CSS设置,实现DIV置顶,置底,置左,置右,居中。
利用jquery实现DIV四个方向随滚动条,窗体大小浮动。
一个漂浮反弹的DIV。
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
    <title>获取窗口高度宽度,DIV置顶,置底,置左,置右,居中,随滚动条居中</title>
    <script src="" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            showwidth_height();
            $(window).resize(showwidth_height);
            $(window).scroll(movesmallleft);
            $(window).resize(movesmallleft);
 
            $(window).scroll(movesmallright);
            $(window).resize(movesmallright);
 
            $(window).scroll(movesmalltop);
            $(window).resize(movesmalltop);
 
            $(window).scroll(movesmallbottom);
            $(window).resize(movesmallbottom);
 
            var ivl = setInterval("floatdiv()", 10); //ivl变量,用来可以使得setInterval停止。通过clearInterval方法。
            $("#floatdiv").hover(function () { clearInterval(ivl) }, function () { ivl = setInterval("floatdiv()", 10); });
        })
 
        function showwidth_height() {
            var s = ""
                + "浏览器当前窗口可视区域高度:" + $(window).height() + "<br/>"
                + "浏览器当前窗口文档的高度:" + $(document).height() + "<br/>"
                + "浏览器当前窗口文档body的高度:" + $(document.body).height() + "<br/>"
                + "浏览器当前窗口文档body的总高度 包括border padding margin :" + $(document.body).outerHeight(true) + "<br/>"
                + "浏览器当前窗口可视区域宽度:" + $(window).width() + "<br/>"
                + "浏览器当前窗口文档对象宽度:" + $(document).width() + "<br/>"
                + "浏览器当前窗口文档body的宽度:" + $(document.body).width() + "<br/>"
                + "浏览器当前窗口文档body的总宽度 包括border padding margin:" + ($(document.body).outerWidth(true)) + "<br/>"
            $("#center").html(s);
        }
 
        function movesmallleft() {
            var topvalue = $(window).height() / 2 + $(window).scrollTop(); //滚动条滚动了多少偏移量,就要把这个偏移量加上去。
            var leftvalue = 0 + $(window).scrollLeft(); //滚动条滚动了多少偏移量,就要把这个偏移量加上去。
            //这里的stop方法相当必要
            //停止正在进行的动画
            //因为滚动条滚动的时候,会触发多次scroll事件,每次触发的时候,都做动画影响效率,因此要加上stop方法
            //使之立即停止后再做动画。
            $("#smallleft").stop().animate({ top: topvalue, left: leftvalue, marginTop: "-10px" }, "slow");
        }
        function movesmallright() {
            var topvalue = 150 + $(window).scrollTop(); //滚动条滚动了多少偏移量,就要把这个偏移量加上去。
            var rightvalue = 0 - $(window).scrollLeft(); //滚动条滚动了多少偏移量,就要把这个偏移量加上去。
            $("#smallright").stop().animate({ top: topvalue, right: rightvalue }, "slow");
        }
        function movesmalltop() {
            var topvalue = 0 + $(window).scrollTop(); //滚动条滚动了多少偏移量,就要把这个偏移量加上去。
            var leftvalue = $(window).width() / 2 + $(window).scrollLeft(); //滚动条滚动了多少偏移量,就要把这个偏移量加上去。
            $("#smalltop").stop().animate({ top: topvalue, left: leftvalue }, "slow");
        }
        function movesmallbottom() {
            var bottomvalue = 0 - $(window).scrollTop(); //滚动条滚动了多少偏移量,就要把这个偏移量加上去。
            var leftvalue = $(window).width() / 2 + $(window).scrollLeft(); //滚动条滚动了多少偏移量,就要把这个偏移量加上去。
            $("#smallbottom").stop().animate({ bottom: bottomvalue, left: leftvalue }, "slow");
        }
 
        var direct = "leftup";
        //根据当前方向和偏移量,判断接下来的方向。
        function floatdiv() {
            var top = $("#floatdiv").offset().top;
            var left = $("#floatdiv").offset().left;
            //加上偏移量,主要用来处理滚动条的滚动时候对top,left的影响
            if (top < 0 + $(window).scrollTop() && direct == "rightup") {
                direct = "rightdown";
            }
            else if (top < 0 + $(window).scrollTop() && direct == "leftup") {
                direct = "leftdown";
            }
            else if (left < 0 + $(window).scrollLeft() && direct == "leftup") {
                direct = "rightup";
            }
            else if (left < 0 + $(window).scrollLeft() && direct == "leftdown") {
                direct = "rightdown";
            }
            //加上div的高度
            else if (top + 80 > $(window).height() + $(window).scrollTop() && direct == "leftdown") {
                direct = "leftup";
            }
            else if (top + 80 > $(window).height() + $(window).scrollTop() && direct == "rightdown") {
                direct = "rightup";
            }
            //加上div的宽度
            else if (left + 80 > $(window).width() + $(window).scrollLeft() && direct == "rightdown") {
                direct = "leftdown";
            }
            else if (left + 80 > $(window).width() + $(window).scrollLeft() && direct == "rightup") {
                direct = "leftup";
            }
 
            if (direct == "leftdown") {
                toptop = top + 1;
                leftleft = left - 5;
            } else if (direct == "rightdown") {
                toptop = top + 1;
                leftleft = left + 5;
 
            } else if (direct == "rightup") {
                toptop = top - 1;
                leftleft = left + 5;
 
            } else if (direct == "leftup") {
                toptop = top - 1;
                leftleft = left - 5;
            }
 
            $("#floatdiv").html(Date());
            $("#floatdiv").offset({ "top": top, "left": left })
        }
 
    </script>
    <style type="text/css">
        #top
        {
            position: fixed;
            top: 20px;
            left: 0px;
            height: 50px;
            width: 100%;
            background: #666666;
            z-index: 6;
            text-align: center;
        }
        
        #left
        {
            position: fixed;
            top: 50%;
            left: 10px;
            height: 300px;
            width: 100px;
            background: #666666;
            z-index: 6;
            text-align: center;
            margin-top: -150px; /*因为不是50%不是真正的居中,所以要上移高度的一半*/
        }
        
        #smallleft
        {
            position: absolute;
            top: 50%;
            left: 10px;
            height: 20px;
            width: 20px;
            background: red;
            z-index: 6;
            text-align: center;
            margin-top: -10px; /*因为不是50%不是真正的居中,所以要上移高度的一半*/
        }
        
        #smallright
        {
            position: absolute;
            top: 150px;
            right: 0px;
            height: 20px;
            width: 20px;
            background: red;
            z-index: 6;
            text-align: center;
        }
        
        #smalltop
        {
            position: absolute;
            top: 0px;
            left: 50%;
            height: 20px;
            width: 20px;
            background: red;
            z-index: 6;
            text-align: center;
        }
        
        #smallbottom
        {
            position: absolute;
            bottom: 0px;
            left: 50%;
            height: 20px;
            width: 20px;
            background: red;
            z-index: 6;
            text-align: center;
        }
        
        #floatdiv
        {
            position: fixed;
            top: 200px;
            left: 300px;
            height: 80px;
            width: 80px;
            background: blue;
            z-index: 6;
            text-align: center;
        }
        
        #bottom
        {
            z-index: 6;
            position: fixed;
            bottom: 0px;
            background: #666666;
            height: 50px;
            width: 100%;
            text-align: center;
        }
        
        #right
        {
            position: fixed;
            top: 50%;
            right: 10px;
            height: 300px;
            width: 100px;
            background: #666666;
            z-index: 6;
            text-align: center;
            margin-top: -150px; /*因为不是50%不是真正的居中,所以要上移高度的一半*/
        }
        
        #center
        {
            position: fixed;
            top: 50%;
            left: 50%;
            height: 200px;
            width: 400px;
            background: #666666;
            z-index: 6;
            text-align: center;
            margin-top: -100px; /*因为不是50%不是真正的居中,所以要上移高度的一半*/
            margin-left: -200px; /*因为不是50%不是真正的居中,所以要左移宽度的一半*/
        }
    </style>
</head>
<body>
    <div id="top">
        TOP
    </div>
    <div id="left">
        LEFT
    </div>
    <div id="bottom">
        BOTTOM
    </div>
    <div id="right">
        RIGHT
    </div>
    <div id="center">
        CENTER
    </div>
    <div id="smallleft">
    </div>
    <div id="smallright">
    </div>
    <div id="smallbottom">
    </div>
    <div id="smalltop">
    </div>
    <div id="floatdiv">
    </div>
    <div style="height: 1024px; background-color: Silver">
        <pre>
 
 
 
 
    绝对定位使元素的位置与文档流无关,因此不占据空间。
    这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
    普通流中其它元素的布局就像绝对定位的元素不存在一样:
 
    绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。
 
</pre>
        <table>
            <tr>
                <td>
                    absolute
                </td>
                <td>
                    <p>
                        生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。</p>
                    <p>
                        元素的位置通过 "left", "top", "right" 以及 "bottom"
                        属性进行规定。</p>
                </td>
            </tr>
            <tr>
                <td>
                    fixed
                </td>
                <td>
                    <p>
                        生成绝对定位的元素,相对于浏览器窗口进行定位。</p>
                    <p>
                        元素的位置通过 "left", "top", "right" 以及 "bottom"
                        属性进行规定。</p>
                </td>
            </tr>
            <tr>
                <td>
                    relative
                </td>
                <td>
                    <p>
                        生成相对定位的元素,相对于其正常位置进行定位。</p>
                    <p>
                        因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。</p>
                </td>
            </tr>
            <tr>
                <td>
                    static
                </td>
                <td>
                    默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
                </td>
            </tr>
            <tr>
                <td>
                    inherit
                </td>
                <td>
                    规定应该从父元素继承 position 属性的值。
                </td>
            </tr>
        </table>
    </div>
</body>
</html>
 作者:一只博客

获取浏览器显示区域(可视区域)的高度 :   

滚动的几种场景

  • 只有window窗体滚动
  • 内滚动布局
  • 窗体滚动+DIV内滚动

这时候,台下观众会问,什么是内滚动布局,什么是window滚动呢?

让我们来了解下哈

jquery获得窗口高宽,文档高宽值。 通过CSS设置,实现DIV置顶,置底,置左,置右,居中。 利用jquery实现DIV四个方向...

$(window).height();   

只有window窗体滚动

即页面只含有浏览器窗体默认的滚动条,窗体滚动条随页面内容而不断增长。

如手Q吃喝玩乐的站点首页, 在android机上就是使用window滚动

图片 1

获取浏览器显示区域(可视区域)的宽度 :

内滚动布局

什么是内滚动布局呢? 个人认为,内滚动布局就是主滚动条是在页面内部,而不是浏览器窗体上的布局。 故内滚动布局是相对传统的window窗体滚动而言的。

(具体为什么ios上和android上会使用不同的滚动方式,可以去了解下=。=)

内滚动布局什么时候会使用了?

  • ios 页面顶部带有fixed输入框(解决软键盘弹出导致页面错位的问题)

例如,手Q吃喝玩乐的站点首页, 在ios机上便是内滚动布局

图片 2

  • 桌面软件或者客户端,如群活动

图片 3

  • 管理系统也有经常使用

$(window).width();   

窗体滚动+DIV内滚动

这种场景就是,两者都会出现,故计算滚动时最为复杂。

图片 4

获取页面的文档高度   

滚动计算基础知识

由于不同浏览器其窗体滚动条的属性获取方式有所差异,故考虑兼容性,我们假设使用了场景是移动到,并且使用了zepto的库

首先,我们想要更好的操作控制条,需了解两个地方

  • 滚动条属性
  • 滚动条调用方法

JavaScript

var $scrollTarget = $(".ui-page"); //若为控制window滚动条 var currenY = $(document.body).scrollTop(); //当前window纵向滚动的位置 var currenX = $(document.body).scrollLeft(); //当前window横向滚动的位置 var Y = 想滚动到的垂直位置; var X = 想滚动到的水平位置; $(window).scrollTop(Y); $(window).scrollLeft(X); //若为页面内节点的滚动条 var currenY =$scrollTarget.scrollTop(); //当前scrollTarget纵向滚动的垂直位置 var currenX = $scrollTarget.scrollLeft(); //当前scrollTarget横向滚动条的位置 $scrollTarget.scrollTop(Y); $scrollTarget.scrollLeft(X);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var $scrollTarget = $(".ui-page");
 
//若为控制window滚动条
var currenY = $(document.body).scrollTop(); //当前window纵向滚动的位置
var currenX = $(document.body).scrollLeft(); //当前window横向滚动的位置
var Y = 想滚动到的垂直位置;
var X = 想滚动到的水平位置;
$(window).scrollTop(Y);
$(window).scrollLeft(X);
 
//若为页面内节点的滚动条
var currenY =$scrollTarget.scrollTop(); //当前scrollTarget纵向滚动的垂直位置
var currenX = $scrollTarget.scrollLeft(); //当前scrollTarget横向滚动条的位置
$scrollTarget.scrollTop(Y);
$scrollTarget.scrollLeft(X);

我们可以发现 在这里window滚动比较特殊

其获取滚动属性是用 document.body这个对象,而调用滚动条滚动方法是用window的对象

(不同浏览器其获取浏览器窗体滚动条的方式也存在着差异,大家可以去了解下)

接下来,我们了解下几个重要的属性值

JavaScript

//当前window可视内容区域宽高: window.innerWidth window.innerHeight //浏览器滚动条偏移值: $(document.body).scrollTop(); //节点offset值 $("#div").offset().top; $("#div").offset().left; //节点的宽高 $("#div").height(); $("#div").width(); //节点的滚动条偏移值 $("#div").scrollTop();

1
2
3
4
5
6
7
8
9
10
11
12
13
//当前window可视内容区域宽高:
window.innerWidth
window.innerHeight
//浏览器滚动条偏移值:
$(document.body).scrollTop();
//节点offset值
$("#div").offset().top;
$("#div").offset().left;
//节点的宽高
$("#div").height();
$("#div").width();
//节点的滚动条偏移值
$("#div").scrollTop();

现在我们知道如何调用滚动条到指定的位置和获取滚动条偏移值,那么我们来做一个需求把

假设是这个页面

图片 5

需求描述 : 希望通过点击按钮,使绿色区域的item,能够定位到屏幕中间

这种需求很常见吧~

那么我们先分析下页面, 可以从页面中看出,这个是一个内滚动布局单页页面。

JavaScript

//相信我们js代码就是这样写的 var itemHeight = 每个item的高度 var itemIndex = 指定item的下标(1, 2,3 ...) var rightPosY = itemHeight * itemIndex //使绿色区域的item能滚动到列表可视区域的中间的偏移值; $(button).on("click", function(){ $(scrollDom).scrollTop(rightPosY); });

1
2
3
4
5
6
7
//相信我们js代码就是这样写的
var itemHeight = 每个item的高度
var itemIndex = 指定item的下标(1, 2,3 ...)
var rightPosY =  itemHeight * itemIndex //使绿色区域的item能滚动到列表可视区域的中间的偏移值;
$(button).on("click", function(){
    $(scrollDom).scrollTop(rightPosY);
});

那么大家就不满意了,举起双手抗议说 :“这个太简单了,如果每个列表item都是高度不一致,且高度未知的呢?“

那么问题升级了,我们来考虑下这个问题,如下图分析图

图片 6

为了使目标节点,移动到内滚动区域的中间线 我们最终需要知道当前目标节点距离中间线的偏移值,然后加上当前滚动区域的滚动条偏移值,便是我们需要滚动条滚动到的偏移值大小了。

即最终偏移值 = 当前目标节点距离中间线的偏移值 + 当前滚动区域的滚动条偏移值;

可知,当前滚动区域的滚动条偏移值即等于  $("#scrollDom").scrollTop();

那么distance 怎么获取呢? 我们可以从上面的分析图得出

JavaScript

var distance = $("#targetDom").offset().top - $("#scrollDom").offset().top - $("#scrollDom").height/2;

1
var distance =  $("#targetDom").offset().top - $("#scrollDom").offset().top - $("#scrollDom").height/2;

完整代码

JavaScript

var distance = $("#targetDom").offset().top - $("#scrollDom").offset().top - $("#scrollDom").height/2; //算出当前节点在 var rightY = $(scrollDom).scrollTop + distance; var $(scrollDom).scrollTop(rightY);

1
2
3
4
var distance =  $("#targetDom").offset().top - $("#scrollDom").offset().top - $("#scrollDom").height/2;
//算出当前节点在
var rightY  = $(scrollDom).scrollTop + distance;
var $(scrollDom).scrollTop(rightY);

只要弄明白了滚动涉及的属性和方法,在业务开发中,则能迅速得到想要的滚动效果。

1 赞 4 收藏 评论

图片 7

$(document).height();   

获取页面的文档宽度 :

$(document).width(); 

浏览器当前窗口文档body的高度:  

$(document.body).height();

浏览器当前窗口文档body的宽度: 

$(document.body).width();

获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)  

$(document).scrollTop();   

获取滚动条到左边的垂直宽度 :

$(document).scrollLeft(); 

获取或设置元素的宽度:

$(obj).width();

获取或设置元素的高度:

$(obj).height();

某个元素的上边界到body最顶部的距离:obj.offset().top;(在元素的包含元素不含滚动条的情况下)

某个元素的左边界到body最左边的距离:obj.offset().left;(在元素的包含元素不含滚动条的情况下)

返回当前元素的上边界到它的包含元素的上边界的偏移量:obj.offset().top(在元素的包含元素含滚动条的情况下)

返回当前元素的左边界到它的包含元素的左边界的偏移量:obj.offset().left(在元素的包含元素含滚动条的情况下)

 

scrollTop(), scrollLeft()

设置或返回已经滚动到元素的左边界或上边界的像素数。简单地说,就是设置或者获取匹配元素相对滚动条上侧或者左侧的偏移。只有在元素有滚动条的时候,例如,元素的 CSS overflow 属性设置为 auto 的时候,这些像素才有用。这些属性也只在文档的 <body> 或 <html> 标记上定义(这和浏览器有关),并且一起来制定滚动文档的位置。注意,这些属性并不会指定一个 <iframe> 标记的滚动量。这是非标准的但却得到很好支持的属性

本文由澳门威斯尼人平台登录发布于Web前端,转载请注明出处:您确实懂了呢,获取页面成分的属性值

相关阅读