首页
学习
活动
专区
工具
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
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Online程序学习(三)子屏幕区域控件 和Table Control控件

    一、子屏幕区域控件 简述 子屏幕是一个独立的屏幕,显示在另一个(“主”)屏幕区域中。 子屏幕上不能附带 OK_CODE 或 FCODE。...主屏幕本身的 OK_CODE 是子屏幕的 OK_CODE 实现 控件按钮 点击按钮绘制子屏幕区域,给子屏幕名称:SUBSCREEN01 代码实现 PROCESS BEFORE OUTPUT....*语法含义:将程序ZBX_01内的0140子屏幕展示在SUBSCREEN01区域 PROCESS AFTER INPUT..... * PAI也需要调用SUBSCREEN01,因为要调用子屏幕屏幕的 PAI 流逻辑 二、Table Control控件 简述 表格控件是屏幕表格显示的对象,您可以将其添加到“屏幕绘画器”中的屏幕...contrl 是 ABAP 程序在屏幕上的表控件的名称。 该控件允许 ABAP 程序读取编辑表控件的属性并影响该控件。

    83420

    第51天:封装可视区域大小函数client

    一、client  可视区域     offsetWidth: width  +  padding  +  border (披着羊皮的狼)     clientWidth: width  +  padding...     不包含border  scrollWidth: 大小是内容的大小  二、检测屏幕宽度(可视区域) 1、ie9及其以上的版本 window.innerWidth   2、标准模式 document.documentElement.clientWidth...3、怪异模式 document.body.clientWidth 三、window.onresize    改变窗口事件 window.onscroll  = function() {}  屏幕滚动事件...(分辨率) clientWidth   返回的是 可视区 大小    浏览器内部的大小 window.screen.width   返回的是我们电脑的 分辨率   跟浏览器没有关系 六、封装可视区域大小的函数...DOCTYPE html> 2 3 4 5 封装可视区域大小的函数</

    54940

    (五)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.8K10
    领券