首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js获取网页屏幕可视区域高度

document.documentElement.clientHeight ==> 可见区域高度 看了以上代码,可能会有疑问说body和可见区域到底有什么不同呢,我们在console里运行一下会发现在不同的网页中有不同的情况值...原因就是:在浏览器默认的情况下,body有8-10px左右的边距,而可见区域包括了这个边距,因此如果我们用到body{padding:0;margin:0;}来消除这种默认的情况。...以下是兼容主流浏览器(IE/Firefox/Chrome/Safari)获取浏览器窗口可视区域(不包括滚动条)和滚动条位置的代码: ? ?...1 // 获取浏览器窗口的可视区域的宽度 2 function getViewPortWidth() { 3 return document.documentElement.clientWidth...|| document.body.clientWidth; 4 } 5 6 // 获取浏览器窗口的可视区域的高度 7 function getViewPortHeight() { 8

9.5K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    (五)IntersectionObserver 监听元素进入离开指定可视区域

    'IntersectionObserver' 监听元素进入离开指定可视区域 说明 在开发过程中,我们可能经常需要监听元素是否进入可是区域,平时我们都是监听滚动条的高度,但是这样非常消耗资源,在这里我们可以使用...io.observe接受一个DOM元素,添加多个监听 使用forEach io.observe(item) }) 配合vue实现demo dome 配合 vue 写一个自定义指定,当元素进入可视区域的时候给他加上一个...class 离开可视区域的时候给他移除 class 第一步 在 vue 的 src 文件夹下面创建一个 directives 文件夹,文件夹里面创建一个 index 的 ts 或 js 文件 /*...* * @describe 自定义指令模块 * @params { * ToAnimation 进入可视区域动画 离开可视区域动画 * formAnimation...directives 文件夹 创建需要自定义指令的文件夹 自定义动画指令 第四步 编写自定义指令,并在 directives 下的 index 入口文件里注册自定义指令 /** * @describe 元素进入可视区域动画挂载

    2.7K10

    数据可视化-Matplotlib在线图上填充区域

    这不仅可以使我们的图表看起来更专业,而且我们还可以通过根据特定阈值填充区域来添加有用信息。 ?...入门实例 接下来看一个例子:读取一个data.csv文件内容为统计不同年龄段的所有开发人员、Python开发人员、JavaScript开发人员的中等公司表格,我们用填充区域的方式显示Python开发高于所有开发人人员的薪水年龄...(黄色区域),以及低于所有开发人员的薪水人员的年龄(红色区域),csv文件内容大致如下: ?...#where 当python开发薪水大于所有开发薪水时候 #interpolate 定义填充区域为Ture #color:区域颜色 #alpha :设置透明度 plt.fill_between(ages...#where 当python开发薪水小于等于所有开发薪水时候 #interpolate 定义填充区域为Ture #color:区域颜色 #alpha :设置透明度 plt.fill_between(ages

    1.1K30

    JVM内存区域

    JVM内存区域 数据区域 ?...此内存区域是唯一一个在《Java虚拟机规范》中没有规定任何OutOfMemoryError内存溢出情况的区域。...Java堆是被所有线程共享的一块内存区域,在虚拟机启动时创建。此内存区域的唯一目的就是存放对象实例,Java世界里“几乎”所有的对象实例都在这里分配内存。...相对而言,垃圾收集行为在这个区域的确是比较少出现的,但并非数据进入了方法区就如永久代的名字一样“永久”存在了。...这区域的内存回收目标主要是针对常量池的回收和对类型的卸载,一般来说这个区域的回收效果比较难令人满意,尤其是类型的卸载,条件相当苛刻,但是这部分区域的回收有时又确实是必要的。

    1.1K30

    Java内存区域

    , 这些区域有各自的用途 , 会随着虚拟机进程的启动而创建 或者是 随着用户线程的启动和结束而建立和销毁。...程序计数器区域 是唯一一个在《Java虚拟机规范》中没有规定任何OneOfMemoryError情况的区域 Java虚拟机栈(Java Virtual Machine Stack) 与上面的程序计数器一样...这区域的内存回 收目标主要是针对常量池的回收和对类型的卸载,一般来说这个区域的回收效果比较难令人满意,尤 其是类型的卸载,条件相当苛刻,但是这部分区域的回收有时又确实是必要的。...- 标记压缩(整理)算法会整理内存碎片,堆内存一存对象,另一边为空闲区域 3....每个线程预先分配TLAB(本地对象分配缓存) - 通过设置 -XX:+UseTLAB参数来设置(区域加锁机制) 3. 在Eden区给每个线程分配一块区域 TLAB: 本地对象分配缓存。

    13010

    JVM内存区域

    Java运行时内存区域 Java虚拟机在启动时会根据JVM参数向操作系统申请内存,并将申请到的内存划分为不同的区域。...这些区域的作用各不相同,有的区域在JVM启动时就已初始化并一直存在,有的区域则依赖于用户线程的启动和结束而建立和销毁。...JVM的内存区域包含以下几个运行时数据区(图摘自深入理解JAVA虚拟机第三版)。...程序计数器只占很小的一块空间,而且不会出现扩容的情况,是JVM里唯一不会OOM的内存区域。 运行时常量池 运行时常量池是方法区的一部分。...直接内存 直接内存不是虚拟机运行时数据区的一部分,也不是《Java虚拟机规范》中 定义的内存区域。但是这部分内存也被频繁的使用,而且也会导致OOM异常。

    94300
    领券