【美高梅开户网址】要素地点,获取页面成分的属性值

滚动,你确实懂了吧

2015/10/07 · JavaScript
· 滚动

原稿出处: IMWEB –
coverguo   

在作业中,页面滚动的场所拾叁分普遍,

为此对此滚动的放量通晓,可以让我们升高开支的频率!

js与jquery得到页面大小、滚动条地点、成分地方

获得浏览器展现区域(可视区域)的惊人 :   

此文达成了如下效果:
jquery获得窗口高宽,文书档案高宽值。
通过CSS设置,实现DIV置顶,置底,置左,置右,居中。
动用jquery完结DIV多少个趋势随滚动条,窗体大小浮动。
2个上浮反弹的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方法很是须要
            //结束正在进展的动画片
           
//因为滚动条滚动的时候,会接触数16次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;
/*因为不是百分之五十不是确实的居中,所以要更上一层楼中度的一半*/
        }
        
        #smallleft
        {
            position: absolute;
            top: 50%;
            left: 10px;
            height: 20px;
            width: 20px;
            background: red;
            z-index: 6;
            text-align: center;
            margin-top: -10px;
/*因为不是二分一不是真的的居中,所以要提升高度的3/6*/
        }
        
        #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;
/*因为不是1/2不是当真的居中,所以要向上高度的四分之二*/
        }
        
        #center
        {
            position: fixed;
            top: 50%;
            left: 50%;
            height: 200px;
            width: 400px;
            background: #666666;
            z-index: 6;
            text-align: center;
            margin-top: -100px;
/*因为不是一半不是实在的居中,所以要进步中度的4/8*/
            margin-left: -200px;
/*因为不是5/10不是真正的居中,所以要左移宽度的四分之二*/
        }
    </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滚动呢?

让我们来询问下哈

复制代码 代码如下:

$(window).height();   

jquery得到窗口高宽,文书档案高宽值。
通过CSS设置,达成DIV置顶,置底,置左,置右,居中。
利用jquery完毕DIV八个方向…

唯有window窗体滚动

即页面只包蕴浏览器窗体暗中认可的滚动条,窗体滚动条随页面内容而持续增强。

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

美高梅开户网址 1

//页面地方及窗口大小

取得浏览器显示区域(可视区域)的上升幅度 :

内滚动布局

哪些是内滚动布局呢?
个人觉得,内滚动布局正是主滚动条是在页面内部,而不是浏览器窗体上的布局。
故内滚动布局是周旋守旧的window窗体滚动而言的。

(具体怎么ios上和android上会使用区别的轮转方式,能够去探听下=。=)

内滚动布局如曾几何时候会采纳了?

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

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

美高梅开户网址 2

  • 桌面软件依然客户端,如群活动

美高梅开户网址 3

  • 管住体系也有常常选拔

function GetPageSize() {
var scrW, scrH;
if(window.innerHeight && window.scrollMaxY)
{    // Mozilla   
scrW = window.innerWidth + window.scrollMaxX;   
scrH = window.innerHeight + window.scrollMaxY;
}
else if(document.body.scrollHeight > document.body.offsetHeight)
{    // all but IE Mac   
scrW = document.body.scrollWidth;   
scrH = document.body.scrollHeight;
} else if(document.body)
{ // IE Mac   
scrW = document.body.offsetWidth;   
scrH = document.body.offsetHeight;
}
var winW, winH;
if(window.innerHeight)
{ // all except IE   
winW = window.innerWidth;
winH = window.innerHeight;
} else if (document.documentElement &&
document.documentElement.clientHeight)
{    // IE 6 Strict Mode   
winW = document.documentElement.clientWidth;    
winH = document.documentElement.clientHeight;
} else if (document.body) { // other   
winW = document.body.clientWidth;   
winH = document.body.clientHeight;
}    // for small pages with total size less then the viewport
var pageW = (scrW<winW) ? winW : scrW;
var pageH = (scrH<winH) ? winH : scrH;   
return {PageW:pageW, PageH:pageH, WinW:winW, WinH:winH};

$(window).width();   

窗体滚动+DIV内滚动

那种光景就是,两者都晤面世,故总计滚动时最为复杂。

美高梅开户网址 4

};

获取页面包车型客车文书档案高度   

滚动计算基础知识

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

第2,大家想要更好的操作控制条,需了然七个地点

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

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

//滚动条地方 function GetPageScroll()
{
var x, y; if(window.pageYOffset)
{    // all except IE   
y = window.pageYOffset;   
x = window.pageXOffset;
} else if(document.documentElement &&
document.documentElement.scrollTop)
{    // IE 6 Strict   
y = document.documentElement.scrollTop;   
x = document.documentElement.scrollLeft;
} else if(document.body) {    // all other IE   
y = document.body.scrollTop;   
x = document.body.scrollLeft;  
}
return {X:x, Y:y};

$(document).height();   

}

获取页面包车型大巴文书档案宽度 :

jquery

$(document).width(); 

取得浏览器显示区域的莫大 : $(window).height();
赢得浏览器显示区域的上涨幅度 :$(window).width();
取得页面包车型地铁文书档案高度 :$(document).height();
赢得页面包车型客车文书档案宽度 :$(document).width();

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

得到滚动条到顶部的垂直中度 :$(document).scrollTop();
收获滚动条到左边的垂直宽度 :$(document).scrollLeft();

$(document.body).height();

总计成分地点和偏移量 offset方法是1个很有用的方法,它回到包装集中第贰个要素的晃动音信。默许情状下是相对body的舞狮消息。结果包括top和left七个属性。
offset(options, results)
options.relativeTo  钦命相对总结偏移地点的祖宗成分。这么些成分应该是relative或absolute定位。省略则相对body。
options.scroll  是或不是把 滚动条计算在内,暗中认可TRUE
options.padding  是还是不是把padding总结在内,暗中认可false
options.margin   是不是把margin总括在内,私下认可true
options.border  是还是不是把边框总计在内,暗中同意true

浏览器当前窗口文书档案body的增长幅度: 

您可能感兴趣的篇章:

  • JavaScript与JQUEPRADOY获取成分的宽、高和职位
  • js从数组中除去钦定值(不是内定位置)的因素完毕代码
  • JS达成随页面滚动呈现/隐藏窗口固定地方成分
  • javascript完结拖动成分沟通地方
  • js控制元素展现在荧屏固定地方及监听显示器中度变化的点子
  • JavaScript控制网页平滑滚动到钦定成分地方的章程
  • 在JS数组特定索引处钦定地点插入成分的技巧
  • 在JS数组特定索引处内定地点插入成分
  • JS中获取 DOM
    成分的绝对地点实例详解

$(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>
标记上定义(这和浏览器有关),并且一路来制定滚动文书档案的任务。注意,那一个属性并不会钦定1个<iframe> 标记的滚动量。那是非标准化准的但却收获很好协助的质量

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图