window.innerHeight    这是浏览器里面内容的高度，直接就是值，不需要其它操作;

window.pageYOffset 这是滚动条到浏览器顶端的距离;

$(元素).offset().top  这是元素，到浏览器顶端的高度，与下拉无关，加载好的高度;

$(window).scroll()  滚动事件

关于js的页面高度和滚动条高度还有元素高度的更多相关文章

  1. JS判断页面是否出现滚动条

    今天无聊,帮一个网友解决一个很无聊的问题,用JS判断页面是否出现滚动条,在网上看了一些代码,经过验证并不起作用,下面是在网上搜索到的代码: 当可视区域小于页面的实际高度时,判定为出现滚动条,即: if ...

  2. WOW.js – 在页面滚动时展现动感的元素动画效果

    在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...

  3. 通过 JS 判断页面是否有滚动条的简单方法

    前言 最近在写插件的过程中,需要使用 JS 判断是否有滚动条,搜了一下,大致方法都差不多,但都有些啰嗦,代码不够简洁.最终通过参考不同方法,写了一个比较简单的方法.在判断滚动条的同时也需要计算滚动条的 ...

  4. WOW.js——在页面滚动时展现动感的元素动画效果

    插件描述:WOW.js 是一款可以实现滚动页面时触发CSS 动画效果的插件,动态效果可以使网站显示更有动感. 当页面在向下滚动的时候,使用WOW.js可以让页面元素产生细小的动画效果,从而引起浏览者注 ...

  5. css float父元素高度塌陷

    css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float ...

  6. CSS开发技巧（四）：解决flex多行布局的行间距异常、子元素高度拉伸问题

    在使用flex布局时,若出现换行,有两种较为特殊的现象是值得我们研究的: 子元素高度被拉伸,其实际高度大于它的内容高度. 各行子元素之间的行间距过大,甚至我们根本没有给子元素设置margin. 现在我 ...

  7. jquery、js获取页面高度宽度等

    jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...

  8. 原生JS 和 JQ 获取滚动条的高度，以及距离顶部的高度

    JQ:相对比较简便 获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 ...

  9. jQuery中获取文档的高度、可视区域高度以及滚动条距页面顶部的高度

    在写页面的时候,经常会碰到这样的情况,就是要获取文档的高度.可视区域高度或者滚动条距页面顶部的高度等情况. 但我总是有些爱搞混淆了,这里还是简单做个笔记吧,这里只限于使用jQuery来获取. 1.获取 ...

  10. 使用js获取页面的各种高度

    使用js获取相关高度: 获取网页被滚动条卷去的高度——兼容写法: scrollHeight = documen.body.scrollTop || document.documentElement.s ...

随机推荐

  1. 2019前端面试题之js

    1.js的数据类型 js的数据类型分为基本类型跟引用类型 基本数据类型(5个):undefined,boolean,number,string,null.基本类型的访问是按值访问的,就是说你可以操作保 ...

  2. 微信小程序开发学习（一）

    一.各种JSON配置 1.小程序配置app.json 为小程序全局配置,包括所有页面路径.界面表现.网络超时时间.底部tab等,类比APP开发中manifest配置. 2.工具配置project.co ...

  3. Android应用市场的帮助类

    写了一个Android应用市场的帮助类,如下: public class MarketUtils { public static final String MARKET_DATA = "ma ...

  4. SVG初尝试(二)

    基本图形 rect(矩形).circle.ellipse(椭圆).line(直线).polyline(折线).polygon(多边形).path(可以绘制任意图形) rect x,y定义矩形坐标,矩形 ...

  5. inotify+rsync文件实时同步报错：usr/local/bin/inotifywait: error while loading shared libraries: libinotifytools.so.0:

    解决办法: ln -sv /usr/local/lib/libinotify* /usr/lib/ /usr/lib64/libinotifytools.so.

  6. 通过GIT_COMMIT进行代码回滚

    首先需要安装插件:conditional-buildstep A buildstep wrapping any number of other buildsteps, controlling thei ...

  7. Build 2019 彩蛋

    N久没写过博客了… 最近在玩 APEX 但是手残党表示打到15级了,至今杀敌 4 人… 当快递员是越来越顺手了… 今年巨硬的 Build 大会会在 5 月 6-8 号召开 新发布的 Hololens ...

  8. RabbitMQ安装手册

    1.   下载 下载地址:http://www.rabbitmq.com/download.html 2.   windows下安装 2.1.  安装Erlang 下载:http://www.erla ...

  9. js,JQ 图片转换base64 base64转换为file对象,blob对象

    //将图片转换为Base64 function getImgToBase64(url,callback){ var canvas = document.createElement('canvas'), ...

  10. UOJ#449. 【集训队作业2018】喂鸽子 min-max容斥,FFT

    原文链接www.cnblogs.com/zhouzhendong/p/UOJ449.html 题解 设 f(i) 表示给 i 只鸽子喂食使得至少一只鸽子被喂饱的期望次数,先 min-max容斥 一下. ...