精华内容
下载资源
问答
  • [js] 获取浏览器当前页面滚动条高度的兼容写法 document.documentElement.scrollTop || document.body.scrollTop; 个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易, 但坚持一定很酷。 主目录 与...

    [js] 获取浏览器当前页面的滚动条高度的兼容写法

    document.documentElement.scrollTop || document.body.scrollTop;
    

    个人简介

    我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
    但坚持一定很酷。

    主目录

    与歌谣一起通关前端面试题

    展开全文
  • 在开发中,兼容性问题是最常见的,今天就来介绍一下关于获取滚动条高度的兼容性写法,宽度同理,我在这里就不一一解释了 各浏览器的写法 IE6/7/8 document.documentElement.scrollTop IE9以上 window....

    前言

    在开发中,兼容性问题是最常见的,今天就来介绍一下关于获取滚动条高度的兼容性写法,宽度同理,我在这里就不一一解释了

    各浏览器的写法

    • IE6/7/8
    document.documentElement.scrollTop
    • IE9以上
    window.pageYOffset或者document.documentElement.scrollTop
    • Safari
    window.pageYOffsetdocument.body.scrollTop
    • Firefox
    window.pageYOffset 或者 document.documentElement.scrollTop
    • Chrome
    document.body.scrollTop

    具体的写法

    通过上面列出的主流浏览器的兼容性,其实我们不难看出,其实只要我们判断到document.body.scrollTop和document.documentElement.scrollTop就会包括上面所有的浏览器;故最终的写法

    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    console.log(scrollTop);

    如果需要监听滚动条,那么就监听onscroll事件即可;如

    document.body.onscroll = function(){
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        console.log(scrollTop);
    }
    展开全文
  • JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度
  • 有的时候确实有这样的业务 当浏览器滚动到 一定得高度之后 做一些 操作 这个时候就需要获取到我们滚动高度了 但是 我看网上写的那个 document.body.scrollTop 好像获取不到 window.scrollY, window.pageYOffset...

    有的时候确实有这样的业务  当浏览器滚动到 一定得高度之后 做一些 操作 

    这个时候就需要获取到我们滚动的高度了 

    但是 我看网上写的那个   document.body.scrollTop  好像获取不到

    document.documentElement.scrollTop  这个才可以

    window.scrollY, window.pageYOffset   这个两个也都可以  

    window.addEventListener( 'scroll', function() {
               console.log(window.scrollY, window.pageYOffset)
           }) 

    关注我 持续更新  前端知识   

    展开全文
  • 1.获取窗口可视范围的高度 //获取窗口可视范围的高度 function getClientHeight(){ var clientHeight=0; if(document.body.clientHeight&&document.documentElement.clientHeight){ var ...

    1.获取窗口可视范围的高度


    
    //获取窗口可视范围的高度
    function getClientHeight(){  
        var clientHeight=0;  
        if(document.body.clientHeight&&document.documentElement.clientHeight){  
            var clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?
    document.body.clientHeight:document.documentElement.clientHeight;
        }else{  
            var clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?
    document.body.clientHeight:document.documentElement.clientHeight;
        }  
        return clientHeight;  
    }

    2.获取窗口滚动条高度


    function getScrollTop(){  
        var scrollTop=0;  
        if(document.documentElement&&document.documentElement.scrollTop){  
            scrollTop=document.documentElement.scrollTop;  
        }else if(document.body){  
            scrollTop=document.body.scrollTop;  
        }  
        return scrollTop;  
    }

    3.获取文档内容实际高度


    function getScrollHeight(){  
        return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);  
    }

    4.使用方法


    window.onscroll=function(){
        // 窗口可视范围的高度
        var height=getClientHeight(),
            // 窗口滚动条高度
            theight=getScrollTop(),
            // 窗口可视范围的高度
            rheight=getScrollHeight(),
            // 滚动条距离底部的高度
            bheight=rheight-theight-height;
            
        document.getElementById('show').innerHTML='此时浏览器可见区域高度为:'+height+'<br />
    此时文档内容实际高度为:'+rheight+'<br />此时滚动条距离顶部的高度为:'+theight+'<br />
    此时滚动条距离底部的高度为:'+bheight;
    }

     

    展开全文
  • 目录 1. 介绍:介绍页面的容器...如:浏览器、内部页面以及工具栏的高度和宽度。 4. 页面信息:介绍HTML页面尺寸信息;如:body总的、展示的高度和宽度。   一、介绍 1. 容器 一个页面的展示,从外到内的容...
  • jquery 获取页面滚动条高度

    千次阅读 2017-04-19 14:12:00
    1、获取浏览器显示区域的高度 : $(window).height(); 2、获取浏览器显示区域的宽度 : ...3、获取页面的文档高度 : ...4、获取页面的文档宽度 : ...5、获取滚动条到顶部的垂直高度 : ...
  • vue中监听浏览器滚动条的宽度高度

    千次阅读 2019-08-06 15:22:16
    记录一下,挖坑挖了好多天
  • 本篇文章主要介绍了JS获取屏幕,浏览器窗口大小,网页高度宽度的实现代码。需要的朋友可以过来参考下,希望对大家有所帮助
  • 做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,...滚动条距离浏览器顶部的高度 = 窗口滚动条高度; 滚动条距离浏览器底部的高度 = 文档(页面)内容实际高度 - 滚动条距离浏览器顶部的高度 - 窗
  • 本篇主要介绍Web环境中屏幕、浏览器页面高度、宽度信息。 一、介绍 1. 容器 一个页面的展示,从外到内的容器为:屏幕、浏览器以及页面本身。 HTML元素展现在页面内,页面展现在浏览器内,而浏览器展现在屏幕内。...
  • 最近在做项目的时候遇到需要用js获取滚动条距离窗口顶端的距离...jquery 获取滚动条高度 获取浏览器显示区域的高度 : $(window).height(); 获取浏览器显示区域的宽度 : $(window).width(); 获取页面的文档高
  • js监听html5页面滚动条事件,用做记录
  • vue中实时获取滚动条距上高度

    千次阅读 2019-07-19 21:18:31
    export default { name: 'App', data(){ return { scroll:'' } }, mounted(){ window.addEventListener('scroll', this.scrollTop) }, methods:{ scrollTop(){ this.scroll...
  • 浏览器滑动页面滚动条时,获取元素距离浏览器顶部距离,动态获取。 举个栗子: 这是要循环的div,要菜单$(".mdtit") 在$(".box")距离顶部小于20px时保持浮动。 <div class="container"> <div class=...
  • **js获取浏览器窗口页面宽度、高度的方法 ** 直接 alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(document.body).height());//浏览器...
  • 这个方法是获取用户电脑屏幕的高度,是不关浏览器或者顶部工具栏跟底部工具栏的高度的 当我在高度为1080的我的显示屏屏幕上打印 window.screen.height 1080 当我在我的电脑上打印 window.screen.height 800 ...
  • javascript 读取滚动条位置,文档总高度页面高度滚动条距离底端位置&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;...
  • 原因想要做响应式设计,遇到——本来没有滚动条,缩小窗口...解决办法实时获取当前浏览所用浏览器滚动条宽度//获取当前浏览器滚动条的宽度,原理是设置一个不可见的div,查看设置scorll前后的宽度差 function getScr
  • 获取当前页面滚动条纵坐标的位置:document.body.scrollTop与document.documentElement.scrollTop 获取当前页面滚动条横坐标的位置:document.body.scrollLeft与document.documentElement.scrollLeft pageXOffset 和...
  • 一、jQuery获取的相关方法jquery 获取滚动条高度 获取浏览器显示区域的高度 : $(window).height(); 获取浏览器显示区域的宽度 : $(window).width(); 获取页面的文档高度 : $(document).height(); 获取...
  • 1.获取文档的高度 $(document).height() 整个文档的高度 document.body.scrollHeight 或者 document....2.获取浏览器可视区域高度 $(window).height() 浏览器可视区域高度 document.documentElement.c...
  • //首先在componentDidMount,进行scroll事件的...componentDidMount() { window.addEventListener('scroll', this.bindHandleScroll) } bindHandleScroll=(e)=>{ // 滚动高度(兼容多种浏览器) const scro...
  • 最近在做项目的时候遇到需要用js获取滚动条距离窗口顶端的距离和js获取...jquery 获取滚动条高度    获取浏览器显示区域的高度 :  $(window).height();  获取浏览器显示区域的宽度 :    $(window).wid
  • 获取浏览器高度

    2019-08-26 10:39:39
    $(window).height ... (document).height()与$(window).height() jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具...
  • 屏幕信息 screen.height // 屏幕的高度 screen.width // 屏幕宽度 screen.availHeight // 屏幕可用高度:即屏幕高度减去上下任务栏后的...window.outerHeight // 浏览器高度 window.outerWidth // 浏览器宽度 window
  • jquery 获取滚动条高度

    千次阅读 2017-08-18 17:29:00
    获取浏览器显示区域的高度 :$(window).height(); 获取浏览器显示区域的宽度 :$(window).width(); ...获取页面的文档高度 :$(document).height();...获取滚动条到顶部的垂直高度 :$(document).scrollTop(); ...
  • scrollHeight: 获取对象的滚动高度。  scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,200
精华内容 7,680
关键字:

获取浏览器当前页面的滚动条高度