React.js学习笔记(15) window对象 + ( element对象盒模型属性 ) + 滚动到最顶部按钮

(一) window对象

(1) 概述

在浏览器中,window对象(注意,w为小写)指当前的浏览器窗口。它也是所有对象的顶层对象。

  • window对象,w是小写
  • window对象,是所以对象的顶层对象
  • 顶层对象:指的是最高一层的对象,所有其他对象都是它的下属。
  • JavaScript规定,浏览器环境的所有全局变量,都是window对象的属性。
全局变量,window对象属性


var a = 1;
window.a // 1


上面代码中,变量a是一个全局变量,但是实质上它是window对象的属性。

声明一个全局变量,就是为window对象的同名属性赋值。



(2) window对象的属性

(1) window.window

window对象的window属性指向自身。


window.window === this // true

(2) window.name

window.name属性用于设置当前浏览器窗口的名字。

  • 与<iframe>窗口通信时,非常有用。

(3) window.location

window.location返回一个location对象,用于获取窗口当前的URL信息。它等同于document.location对象

  • window.location返回一个 location 对象
  • location对象包含了当前窗口的 URL 信息

window.location === document.location // true

window.location对象 = document.location对象

(4) window.closed

window.closed属性返回一个布尔值,表示窗口是否关闭。

  • window.closed 这个属性一般用来检查,使用脚本打开的新窗口是否关闭。
var x = window.open();

x.closed    // false

if (x != null && !x.closed ){
    console.log('如果不等于null并且没有关闭,则输出窗口仍然打开着')
} 

(5) window.opener

window.opener属性返回打开当前窗口的父窗口。如果当前窗口没有父窗口,则返回null。

  • window.opener属性 返回打开当前窗口的父窗口
  • 通过opener属性,可以获得父窗口的的全局变量和方法

(6) window.screenX属性,window.screenY属性

  • window.screenX,返回浏览器窗口左上角相对于当前屏幕左上角((0, 0))的水平距离
  • window.screenY,返回浏览器窗口左上角相对于当前屏幕左上角((0, 0))的垂直距离

(7) window.innerHeight,window.innerWidth

  • window.innerHeight属性,返回 ( 网页 ) 在当前窗口中可见部分的 ( 高度 ) ,即“视口”(viewport),单位为像素
  • window.innerWidth属性, 返回 ( 网页 ) 在当前窗口中可见部分的 ( 宽度 ) ,即“视口”(viewport),单位为像素
  • 注意,这两个属性值包括滚动条的高度和宽度。

(8) window.outerHeight,window.outerWidth

  • window.outerHeight属性返回 ( 浏览器窗口的高度 ),包括浏览器菜单和边框,单位为像素。
  • window.outerWidth属性 返回 ( 浏览器窗口的宽度 ),包括浏览器菜单和边框,单位为像素。

(9) window.pageXOffset,window.pageYOffset

  • ( 注意 ):----------------------------是只读属性
  • 因为是只读,所以不带参数。
  • window.pageXOffset属性返回页面的水平滚动距离,单位都为像素。
  • window.pageYOffset属性返回页面的垂直滚动距离,单位都为像素。
  • 如果用户向下拉动了垂直滚动条75像素,那么window.pageYOffset就是75。用户水平向右拉动水平滚动条200像素,window.pageXOffset就是200。


    window.innerWidth,window.outerWidth,window.screenX,window.pageXOffset



(3) window对象的方法

(1) window.scrollTo()--------滚动到

window.scrollTo方法用于将网页 ( 滚动到 ) 文档中的某个坐标。

  • 它的参数是相对于整张网页的横坐标和纵坐标。
  • window.scrollTo(x-coord,y-coord )滚动到文档中的某个坐标。
  • x-coord 是文档中的横轴坐标。
  • y-coord 是文档中的纵轴坐标。
  • 该函数和 window.scroll是一样的。

(2) window.scrollBy()--------滚动了,有正负

window.scrollBy方法用于将网页移动指定距离,单位为像素。它接受两个参数:向右滚动的像素,向下滚动的像素。

  • 注意参数有正负 ( 例如:window.scrollBy(-10,-10)表示上移动10px,向左移动10px )

(3) window.open()

window.open方法用于新建另一个浏览器窗口,并且返回该窗口对象。

  • open方法一共可以接受四个参数。
  • 第一个参数:字符串,表示新窗口的网址。如果省略,默认网址就是about:blank。
  • 第二个参数:字符串,表示新窗口的名字。如果该名字的窗口已经存在,则跳到该窗口,不再新建窗口。如果省略,就默认使用_blank,表示新建一个没有名字的窗口。
  • 第三个参数:字符串,内容为逗号分隔的键值对,表示新窗口的参数,比如有没有提示栏、工具条等等。如果省略,则默认打开一个完整UI的新窗口。
  • 第四个参数:布尔值,表示第一个参数指定的网址,是否应该替换history对象之中的当前网址记录,默认值为false。显然,这个参数只有在第二个参数指向已经存在的窗口时,才有意义

window.open('baidu.html');

// http://localhost:3000/baidu.html

上面代码会让浏览器弹出一个新建窗口,网址是当前域名下的baidu.html。



--------------------------------------------

var popup = window.open(
  'somepage.html',
  'DefinitionsWindows',
  'height=200,width=200,location=no,status=yes,resizable=yes,scrollbars=yes'
);


上面代码表示,打开的新窗口高度和宽度都为200像素,没有地址栏,有状态栏,允许用户调整大小,有滚动条

(4) window.close()

window.close方法用于关闭当前窗口,一般用来关闭window.open方法新建的窗口。

  • 该方法只对顶层窗口有效,iframe框架之中的窗口使用该方法无效。
var a = window.open('baidu.html','baidu');

a.close()

//关闭a窗口








(二) element对象盒模型属性

(1) Element.clientHeight,Element.clientWidth

-------------------可见部分宽高度-------------------

--------Element.clientHeight--------只包括padding
--------Element.offsetHeight--------包括padding,border,滚动条
  • Element.clientHeight属性返回元素节点 (可见部分的高度 )
  • Element.clientWidth 属性返回元素节点 (可见部分的宽度 )
  • 这两个属性可以计算得到,等于元素的CSS高度(或宽度)加上CSS的Padding,减去滚动条(如果存在)。
  • 对于整张网页来说,当前可见高度(即视口高度)要从document.documentElement对象(即<html>节点)上获取,等同于window.innerHeight属性减去水平滚动条的高度。没有滚动条时,这两个值是相等的;有滚动条时,前者小于后者。
    document.documentElement.clientHeight === window.innerHeight - 水平滚动条的高度
  • 所谓“可见部分”,指的是不包括溢出(overflow)的大小,只返回该元素在容器中占据的大小,对于有滚动条的元素来说,它们等于滚动条围起来的区域大小。这两个属性的值包括Padding、但不包括滚动条、边框和Margin,单位为像素。

var rootElement = document.documentElement;

// 没有水平滚动条时
rootElement.clientHeight === window.innerHeight // true

// 没有垂直滚动条时
rootElement.clientWidth === window.innerWidth // true


(2) Element.clientLeft,Element.clientTop

-----------------边框的宽高度-------------------

  • Element.clientLeft属性等于元素节点 左边框(left border)的宽度,单位为像素。
  • Element.clientTop属性等于元素节点 顶部边框 的高度,单位为像素。
  • 注意:如果元素的显示设为display: inline,它的clientLeft属性一律为0,不管是否存在左边框。

(3) Element.scrollHeight,Element.scrollWidth

-------------------总的宽高度-------------------

-------------------------不包括边框和滚动条-------------------------
  • Element.scrollHeight属性返回某个网页元素的 ( 总高度 )
  • Element.scrollWidth 属性返回某个网页元素的 ( 总宽度 )
  • 它们返回的是整个元素的高度或宽度,包括由于存在滚动条而不可见的部分。
  • 可以理解成元素在垂直和水平两个方向上可以滚动的距离。它们都包括由于溢出容器而无法显示在网页上的那部分高度或宽度。这两个属性是只读属性。
    整张网页的总高度可以从document.documentElement或document.body上读取。
  • 如果内容正好适合它的容器,没有溢出,那么Element.scrollHeight和Element.clientHeight是相等的,scrollWidth属性与clientWidth属性是相等的。如果存在溢出,那么scrollHeight属性大于clientHeight属性,scrollWidth属性大于clientWidth属性。

element.scrollHeight - element.scrollTop === element.clientHeight


存在溢出时,当滚动条滚动到内容底部时,下面的表达式为true

如果滚动条没有滚动到内容底部,上面的表达式为false。



---------------------------------------------------

这个特性结合onscroll事件,可以判断用户是否滚动到了指定元素的底部,

比如向用户展示某个内容区块时,判断用户是否滚动到了区块的底部。

(4) Element.scrollLeft,Element.scrollTop

-------scrollTop顶部到最顶部的距离------可读写------

  • Element.scrollLeft属性表示网页元素的水平滚动条向右侧滚动的像素数量。
  • Element.scrollTop属性表示网页元素的垂直滚动条向下滚动的像素数量。
  • 这两个属性都可读写,设置该属性的值,会导致浏览器将指定元素自动滚动到相应的位置。
    一个元素的 scrollTop 值是这个元素的顶部到它的最顶部可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条,那么它的 scrollTop 值为0。

document.documentElement.scrollLeft

document.documentElement.scrollTop

如果要查看整张网页的水平的和垂直的滚动距离,要从document.documentElemen元素上读取。

(5) Element.offsetHeight,Element.offsetWidth

--------Element.offsetHeight--------包括padding,border,滚动条
--------Element.clientHeight--------只包括padding
  • Element.offsetHeight属性返回元素的垂直高度。
  • Element.offsetWidth 属性返回元素的水平宽度。
    offsetHeight可以理解成元素左下角距离左上角的位移,offsetWidth是元素右上角距离左上角的位移。它们的单位为像素,都是只读。
  • 这两个属性值包括Padding和Border、以及滚动条。
    这也意味着,如果不存在内容溢出,Element.offsetHeight只比Element.clientHeight多了边框的高度。

// 网页总高度
document.documentElement.offsetHeight
document.body.offsetHeight

// 网页总宽度
document.documentElement.offsetWidth
document.body.offsetWidth

(6) Element.offsetLeft,Element.offsetTop

  • Element.offsetLeft返回当前元素左上角相对于Element.offsetParent节点的水平位移,
  • Element.offsetTop返回垂直位移,单位为像素。通常,这两个值是指相对于父节点的位移。

总结:

client,scroll,offset的区别:
http://blog.csdn.net/k491022087/article/details/52629743

整张网页的高度和宽度,可以从document.documentElement(即<html>元素)或<body>元素上读取。

// 网页总高度
document.documentElement.offsetHeight
document.documentElement.scrollHeight
document.body.offsetHeight
document.body.scrollHeight

// 网页总宽度
document.documentElement.offsetWidth
document.documentElement.scrollWidth
document.body.offsetWidth
document.body.scrollWidth

由于<html>和<body>的宽度可能设得不一样,因此从<body>上取值会更保险一点。






-----------------------------------------------------------------------

视口的高度和宽度(包括滚动条),有两种方法可以获得。
对于整个网页,基本都不会设置border,所以只考虑padding和滚动条的影响


// 视口高度
window.innerHeight // 包括滚动条
document.documentElement.clientHeight // 不包括滚动条

// 视口宽度
window.innerWidth // 包括滚动条
document.documentElement.clientWidth // 不包括滚动条






-----------------------------------------------------------------------

网页目前滚动的距离,可以从document.documentElement节点,和document.body 上得到。

(重要)(重要)(重要))(重要))(重要))(重要))(重要))(重要))(重要))(重要))(重要)



// 网页滚动的水平距离
document.documentElement.scrollLeft
document.body.scrollLeft

// 网页滚动的垂直距离
document.documentElement.scrollTop
document.body.scrollTop










案列:

回到顶部按钮功能:
(1) 监听滚动事件,如果当前的 scrollTop值 大于 文档的可视高度clientHeight,就显示回到顶部的按钮;否则,隐藏;
(2) 设置总时间比如:500ms
(3) 求出滚动的速度:当前的scrollTop值 / 总时间
(4) 设置每次滚动的时间stepTime:比如 10ms
(5) 计算每次滚动的距离:速度*stepTime
(6) 设置定时器,当scrollTop<=0时,清除定时器,并跳出定时器里面的距离计算


import React,{Component} from 'react';



export default class toTOP extends Component {
    state = {
        buttonShow: false
    }
    componentWillMount() {
        window.addEventListener('scroll',this.onScroll)  // 监听滚动事件
    }
    onScroll = () => {
        var currentTop = document.documentElement.scrollTop || document.body.scrollTop;   // 顶部到最顶部的距离
        var viewPortHeight = document.documentElement.clientHeight || document.body.clientHeight;  // 可视高度
        
        if ( currentTop > viewPortHeight) {  // 大于显示按钮
            this.setState({
                buttonShow:true
            })
        } else {
            this.setState({ // 小于隐藏按钮
                buttonShow: false
            })
        }
    }
    goTop = () => {
        var currentTop = document.documentElement.scrollTop || document.body.scrollTop;
        var totalTimes = 200;
        var speed = currentTop/totalTimes ;
        var StepTime = 10;
        var setpDistance = speed * StepTime;

        var timer = window.setInterval(()=>{     // var itmer = setInterval()也可以,不要window
            if ( currentTop <=0 ) {
                window.clearInterval(timer);
                return;
            }
            currentTop = currentTop - setpDistance;
            document.documentElement.scrollTop = currentTop;
            document.body.scrollTop = currentTop;
        },StepTime)
        
    }
    render() {
        return (
            <div >
                <div>
                    回到顶部测试
                </div>

                <div 
                ref="button"  
                onClick={this.goTop}
                style={
                    this.state.buttonShow
                    ?
                    {
                        display:'inline-block',
                        border:'1px solid red',
                        background:'yellow',
                        padding:'10px 30px',
                        position:'fixed',
                        bottom:'60px',
                        right:'20px'
                    }
                    :
                    {
                        display:'none',
                        border:'1px solid red',
                        background:'yellow',
                        padding:'10px 30px',
                        position:'fixed',
                        bottom:'60px',
                        right:'20px'
                    }
    
                }>
                    回到顶部
                </div>


                <div style={{padding:'20px 160px'}}>
                年参演电视剧《与青春有关的日子》,开始在影视圈崭露头角[1]  。2005年拍摄古装剧《锦衣卫》。2007年主演赵宝刚导演的青春剧《奋斗》;[2]  同年,主演首部电影《走着瞧》。2008年主演滕华涛执导的电视剧《蜗居》,饰演80后城市青年小贝。[1]  2009年,在电影《海洋天堂》中扮演自闭症患者王大福;同年参演抗战题材的电视剧《雪豹》[4]  。2011年,主演的电视剧《裸婚时代》在各大卫视播出;[5]  2011年-2012年连续2年获得北京大学生电影节[6-7]  最受大学生欢迎男演员奖。2012年,凭借电影《失恋33天》获得第31届大众电影百花奖最佳男主角奖;[8]  同年成立自己经营的北京君竹影视文化有限公司,并导演第一部影视作品《小爸爸》。2013年2月,主演的电影《西游·降魔篇》在全国上映。[9]  
2014年3月28日,主演的中韩合资文艺爱情片《我在路上最爱你》在全国上映。2014年12月18日,在姜文执导的动作喜剧片《一步之遥》中扮演武七一角。[10]  2016年,主演电视剧《少帅》,饰演张学良[11]  ;主演电视剧《剃刀边缘》[12]  。7月15日导演的电影《陆垚知马俐》上映。[13]  
演艺事业外,文章也参与公益慈善事业,2010年成立大福自闭症关爱基金。
2017年9月16日,凭借《陆垚知马俐》获得第31届中国电影金鸡奖导演处女作奖。[14]  

关于你。就是因为我的害怕,我亲眼看你走向她。我喜欢你是事实,你有女朋友也是事实。我以为我不说出口就会保持这样的朋友关系,却还是她赶了个巧,那应该是个寒假,你有女朋友了,我还是听说,我那么爱,却还是无果。于是我和她之间就莫名其妙的就多少有了敌人的感觉,或许就是别人口中的那样,世界上完全不相干的两个女人,会因为一个男人要么很友好,要么是仇恨。关于她我做不到友好,但也不是仇恨,只是你选择了她,我就希望她好好爱你,照顾你,连我的份也一起爱了。自爱上你的那天起,思念便成了戒不掉的瘾。你的一言一笑,一颦一蹙,无不牵动我的心,百千尘思,唯念一缕;万千红颜,唯恋一人。我愿意一生漂泊浪迹在你的故事里,甘愿为你鞍前马后,马首是瞻,即使你从未给我一句承诺,即使你从未给我半分爱情,依然无悔无怨。
   关于你。一场高考,考散了我们,毕业了会不会就是终生最后一见,很高兴,我们不是。各奔东西了,你们继续上了大学,值得欣慰的是,你们也是异地,这样不能算是我心机,只能说是恰巧,你们的安排恰合我意。后来也有听说,她从她的城市去看你,而那时的我能说什么呢。她是真心爱你,这是事实。我也曾和闺蜜说过,一生至少该有一次,为了某个人而忘了自己,不求有结果,不求同行,不求曾经拥有,甚至不求你爱我,只求在我最美的年华里,遇到你。今生遇见你,我觉得是幸福的,尽管这幸福交杂着万般痛苦。我也曾幻想着悄悄地去到你的学校,在某个阳光明媚的下午,在你去教室的路上和你来场偶遇,精心准备的偶遇,。可是我还来不及去和你偶遇,你们就毕了业。爱是种很玄的东西,说不清,道不明,剪不断,理还乱。世上,有种爱明知没有结果,却依然坚守原地,不舍离去,哪怕握不住你的一丝余温,依然选择默默为你守候。一路来去,心门只为你独开,山城只为你独驻,白天只为你旖旎,黑夜只为你流连。因为爱你,哪怕心入住荒岛,还是会以最深情的眼神,看着你幸福。
                </div>
               
            </div>
        )
    }
}