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

如何在纯JavaScript中获得不包括滚动条的视区大小?

在纯JavaScript中获得不包括滚动条的视区大小,可以使用以下方法:

  1. 使用window.innerWidthwindow.innerHeight属性来获取视口的宽度和高度。这两个属性返回的是视口的大小,不包括滚动条。
代码语言:txt
复制
var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
  1. 使用document.documentElement.clientWidthdocument.documentElement.clientHeight属性来获取文档元素的宽度和高度。这两个属性返回的是文档元素的大小,不包括滚动条。
代码语言:txt
复制
var viewportWidth = document.documentElement.clientWidth;
var viewportHeight = document.documentElement.clientHeight;

这些方法可以在纯JavaScript中获取视区大小,适用于前端开发中需要根据视口大小进行布局或响应式设计的场景。

腾讯云相关产品和产品介绍链接地址:

请注意,以上仅为腾讯云的产品示例,其他云计算品牌商也提供类似的产品和服务。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

vw, vh视窗宽高单位使用

这类限制实现,在当下,需要获得图片原始大小,以及浏览器内部尺寸,算大小,算比例等,算是比较折腾。...六、覆盖以及边界定位 既然vw, vh是相关单位,我就想到是不是可以利用这个特性实现精确大小覆盖以及边界定位。...您可以狠狠地点击这里:vw, vh完全覆盖与CSS弹框 ? ?...拖动range控件,可以看到图片尺寸无论怎样变,弹框总是居中——CSS实现,没有JavaScript计算与定位,您有兴趣可以研究研究~~ 正如上面所提到,某些情况下,vw, vh所产生效果与百分比...然后各个浏览器测试发现,效果是一模一样(不支持position: fixedIE6就当它不存在吧),固定在底部,不随滚动条滚动空白工具栏: 说实话,原本第一眼看到单位vw, vh时候,觉得这个单位

2.5K10

再谈BOM和DOM(6):dom对象及event对象位值计算—offsetXTop,clentX

event对象位置信息获取 先总结下区别: event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。...不包括overflow被折叠起来部分,不包括滚动条、border,包括padding     obj.clientWidth = (width + padding)   //获取元素宽度——对象可见宽度...因为滚动条不会出现在顶部或者左侧 offset 指偏移,包括这个元素在文档占用所有显示宽度。比client 多了border。     ...scroll指滚动,包括这个元素没显示出来实际宽度,包括padding,不包括滚动条、border     scrollWidth 获取对象滚动宽度,对象实际宽度;     scrollHeight...jsgetBoundingClientRect 当滚动位置发生了改变,top和left属性值就会随之立即发生变化(因此,它们值是相对于,而不是绝对)。

1.4K20

一文彻底搞懂js位置计算

其实MouseEvent.clientX/Y也就是相对于当前口(浏览器可视)进行位置计算。...我们来看看这张图: 计算元素距离 body 偏移量 当我们需要获得元素距离 body 距离时,但是又无法确定父元素是否存在定位元素时(大多数时候在组件开发,并不清楚父节点是否存在定位)。...Element.getBoundingClientRect 用法讲解 Element.getBoundingClientRect() 方法返回元素大小及其相对于位置。...除了 width 和 height 以外属性是相对于视图窗口左上角来计算。 width和height是计算元素大小,其他属性都是相对于口左上角来说。...计算元素是否出现在口内 利用还是元素距离位置小于大小。 注意即便变成了负值,那么也表示元素曾经出现过在屏幕只是现在不显示了而已。

3.8K10

动手练一练,手写一个价格对比、固定表头滚动表格

虽然有不少相关插件提供了类似的功能,比如 ScrollMagic.js,但是今天实例,我们将用原生方式进行实现,当滚动条滚动至表格位置,固定表头位置,表格内容查看完后,取消固定表头功能。...今天我们将通过一个界面十分漂亮功能价格对比表格,展示固定表头功能,实例操作展示视频所示,当滚动条滚动至表格位置,添加表头固定样式,当滚动至表格底部,移除固定表头样式。...对于inline元素这个属性一直是0,单位px,只读元素。 offsetHeight:包括padding、border、水平滚动条,但不包括margin元素高度。...imweb.io/topic/57c5409e808fd2fb204eef52 作者:IMWeb 吴浩麟 3、getBoundingClientRect getBoundingClientRect 用于获得页面某个元素左...由于窗口大小并非固定,我们会经常会拖动或调整窗口大小,因此相关元素宽度和口高度都要重新计算,这里我们需要添加 resize 事件进行监听,示例代码如下: window.addEventListener

3.2K31

JavaScript与jQuery获取元素宽、高和位置

今天汇总整理了 JavaScript 和 jQuery 获取元素宽高和位置方法,比较全面,方便自己和需要并搜到此文章朋友们查看。...: 获取坐标 getBoundingClientRect() :获取元素相对于浏览器坐标,返回一个Object对象,有6个属性:top | left | right | bottom | width...可视宽高 clientHeight :元素可视高度(包括内边距,不包括边框、外边距或滚动条) clientWidth :元素可视宽度(包括内边距,不包括边框、外边距或滚动条) 自身宽高 offsetHeight...:是该元素显示(可见)内容与该元素实际内容距离(滚动条滚去高度) jQuery: ?...() :获得包括内边距(padding)元素宽度,不包括边框 innerHeight() :获得包括内边距(padding)元素高度,不包括边框 outerWidth() :获得包括内边距(padding

2.9K00

【Scratch入门到精通】blocks 积木风格定制

一,前言 本文主要讲解,怎么定制 scratch-blocks 积木风格,主题色,滚动条,积木工作边界限制等。并深入源码,探究其根本。...(不包括被积木分类菜单遮住部分),随着滚动条滚动,可视工作内容在变化,但是可视工作整体宽度/高度是不变。...内容矩形 当前角色所有工作积木边界组成一个矩形区域。...滚动条位置 示例把积木垂直滚动条移动到了工作左侧,其主要实现方式为重写scratch-blocks/scrollbar.js方法,重写后方法如下。...工作大小限制 通过重新方法点击查看getContentDimensionsBounded_使用,实现思路:把工作上/左边界设置为0,当积木块拖动到可是工作上/左边界附近时,不会自动扩大工作大小

2.4K20

JS-元素大小深入学习-offset、client、scroll等学习研究笔记

一些属性和方法,在dom没有规定如何确定页面中元素大小情况下诞生。。。 1.偏移量(offset dimension)  测试代码: 1 <!...,滚动条是默认在宽度。...2.客户大小(client dimension) 指的是元素内容及其内边距所占据空间大小,从字面上看,客户大小就是元素内部空间大小,因此滚动条占用空间不计算在内【js高级程序设计文摘】 测试offsetWidth...即使加了box-sizing=border-box也不包括border, 几种情况—— //加了box-sizing:   clientWidth值就是  =  style宽度 - border宽度...//有滚动条情况:clientWidth值  =  (style宽度 + padding左右值)- 17px(滚动条宽度值); //滚动条加box-sizing情况:  clientWidth值

88080

关于移动端适配,你必须要知道

四、口( viewport)代表当前可见计算机图形区域。在 Web浏览器术语,通常与浏览器窗口相同,但不包括浏览器 UI, 菜单栏等——即指你正在浏览文档那一部分。...所以,布局口是网页布局基准窗口,在 PC浏览器上,布局口就等于当前浏览器窗口大小不包括 borders 、 margins、滚动条)。...视觉口( visual viewport):用户通过屏幕真实看到区域。 视觉口默认等于当前浏览器窗口大小(包括滚动条宽度)。...4.5 移动端适配 为了在移动端让页面获得更好显示效果,我们必须让布局口、视觉口都尽可能等于理想口。...document.documentElement.clientHeight:获取浏览器布局口高度,包括内边距,但不包括垂直滚动条、边框和外边距。

1.9K41

关于移动端适配,你必须要知道

四、口( viewport)代表当前可见计算机图形区域。在 Web浏览器术语,通常与浏览器窗口相同,但不包括浏览器 UI, 菜单栏等——即指你正在浏览文档那一部分。...所以,布局口是网页布局基准窗口,在 PC浏览器上,布局口就等于当前浏览器窗口大小不包括 borders 、 margins、滚动条)。...视觉口( visual viewport):用户通过屏幕真实看到区域。 视觉口默认等于当前浏览器窗口大小(包括滚动条宽度)。...4.5 移动端适配 为了在移动端让页面获得更好显示效果,我们必须让布局口、视觉口都尽可能等于理想口。...document.documentElement.clientHeight:获取浏览器布局口高度,包括内边距,但不包括垂直滚动条、边框和外边距。

1.9K20

关于移动端适配,你必须要知道

四、口( viewport)代表当前可见计算机图形区域。在 Web浏览器术语,通常与浏览器窗口相同,但不包括浏览器 UI, 菜单栏等——即指你正在浏览文档那一部分。...所以,布局口是网页布局基准窗口,在 PC浏览器上,布局口就等于当前浏览器窗口大小不包括 borders 、 margins、滚动条)。...视觉口( visual viewport):用户通过屏幕真实看到区域。 视觉口默认等于当前浏览器窗口大小(包括滚动条宽度)。...4.5 移动端适配 为了在移动端让页面获得更好显示效果,我们必须让布局口、视觉口都尽可能等于理想口。...document.documentElement.clientHeight:获取浏览器布局口高度,包括内边距,但不包括垂直滚动条、边框和外边距。

2K10

JavaScript代码获取浏览器可视高、文档滚动高和滚动距离

JavaScript 代码,获取滚动距离( scrollTop )和文档高度( scrollHeight )都是以像素为单位值。...如果测试时,发现页面有滚动条,但是获取滚动高度和可视高度一样,要注意看滚动条是不是 iframe 内嵌框架里,上面可以进行切换,默认 top 是默认最外层框架。...下面的表格展示了文档中用到几种属性含义和用法: 属性 含义 示例 document.documentElement.clientHeight 文档根元素口高度,不包括滚动条、边框和外边距。...,不包括滚动条、边框和外边距。...var clientHeight = document.body.clientHeight; window.innerHeight 浏览器窗口口高度,不包括浏览器工具栏、菜单栏等。

12900

Javascript获取页面元素位置

制作网页过程,你有时候需要知道某个元素在网页上的确切位置。 下面的教程总结了Javascript在网页定位方面的相关知识。 一、网页大小和浏览器窗口大小 首先,要明确两个基本概念。...一张网页全部面积,就是它大小。通常情况下,网页大小由内容和CSS样式表决定。 浏览器窗口大小,则是指在浏览器窗口中看到那部分网页面积,又叫做viewport(口)。...很显然,如果网页内容能够在浏览器窗口中全部显示(也就是不出现滚动条),那么网页大小和浏览器窗口大小是相等。如果不能全部显示,则滚动浏览器窗口,可以显示出网页各个部分。...这两个属性指元素内容部分再加上padding所占据视觉面积,不包括border和滚动条占用空间。...五、获取网页元素相对位置 网页元素相对位置,指该元素左上角相对于浏览器窗口左上角坐标。 有了绝对位置以后,获得相对位置就很容易了,只要将绝对坐标减去页面的滚动条滚动距离就可以了。

3.3K70

jquery 与javascript 获取元素尺寸大小对比

jquery获取尺寸方法 width() 方法设置或返回元素宽度(不包括内边距、边框或外边距)。 height() 方法设置或返回元素高度(不包括内边距、边框或外边距)。...innerWidth() 方法返回元素宽度(包括内边距)。 innerHeight() 方法返回元素高度(包括内边距)。 outerWidth() 方法返回元素宽度(包括内边距和边框)。...outerHeight() 方法返回元素高度(包括内边距和边框)。 js获取尺寸方法 clientWidth 是对象可见宽度,不包滚动条等边线,会随窗口显示大小改变。...offsetWidth 是对象可见宽度,包滚动条等边线,会随窗口显示大小改变。 Window 尺寸 有三种方法能够确定浏览器窗口尺寸(浏览器口,不包括工具栏和滚动条)。...,电脑大小是1920*1080,屏幕高度就是1080) clientWidth = width + padding offsetWidth = width + padding + border 1.

1.8K30

详解各种获取元素宽高及位置属性

clientHeight Element.clientWidth 是一个只读属性,对于没有定义 CSS 或者内联布局盒子元素为0,同时它是元素内部高度(单位像素),包含内边距,但不包括水平滚动条、边框和外边距...如果元素文本方向是从右向左(RTL, right-to-left),并且由于内容溢出导致左边出现了一个垂直滚动条,则该属性包括滚动条宽度。clientLeft 不包括左外边距和左内边距。...innerWidth window.innerWidth 是一个只读属性,表示浏览器口(viewport)宽度(单位:像素),如果存在垂直滚动条则包括它。...此时,当你从右到左拖动滚动条时,scrollLeft会从0变为负数(这个特性在chrome浏览器不存在)。...没有垂直滚动条情况下,scrollHeight值与元素视图填充所有内容所需要最小值clientHeight相同。包括元素padding,但不包括元素border和margin。

3.8K80

JavaScript 允许自定义对象分析

JavaScript 所有事物都是对象:字符串、数值、数组、函数... 此外,JavaScript 允许自定义对象。...JavaScript 提供多个内建对象,比如 String、Date、Array 等等。 对象只是带有属性和方法特殊数据类型。 Number 对象 JavaScript 只有一种数字类型。...所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象成员。 全局变量是 window 对象属性。 全局函数是 window 对象方法。...("header"); Window 尺寸 浏览器窗口尺寸(浏览器口,不包括工具栏和滚动条) window.innerHeight - 浏览器窗口内部高度 window.innerWidth...一些属性: screen.availWidth - 可用屏幕宽度 screen.availHeight - 可用屏幕高度 Window Location window.location 对象用于获得当前页面的地址

37200

DOM 和 BOM 各种宽高属性

先区分一下 window 对象和 document 对象: window 对象表示浏览器打开窗口,而 document 对象表示整个 html 文档,它是 window 对象一部分。...不包括开发者工具、顶部栏、侧边栏、滚动条、边框等不由 HTML 控制部分 window.outerHeight/window.outerWidth: 返回表示窗口外部高度/宽度数字。...宽度,且不包括滚动条。...image.png 例如,上图中红框是固定屏幕可视,而网页视为可以上下拖动文档,当滚动条下拉时候,实际上是文档向上拖动,而这个拖动距离就是 element.scrollTop 2.4 返回对象系列...ev.clientX/ev.clientY: 事件发生时,鼠标点击位置相对于浏览器可视不包括滚动条和工具栏)左上角(该点为原点)坐标。

1.9K10

面试官问:如何判断一个元素是否在可视区域?

通过元素位置信息和滚动条滚动高度 在这里,我们先介绍几个元素位置信息和大小: Element.clientWidth Element.clientWidth 属性表示元素内部高度,以像素计。...该属性包括内边距 padding,但不包括边框 border、外边距 margin 和水平滚动条(如果有的话)。...❞ window.innerHeight window.innerHeight 属性表示浏览器窗口口(viewport)高度(以像素为单位);如果有水平滚动条,也包括滚动条高度。...通过getBoundingClientRect方法来获取元素位置信息 Element.getBoundingClientRect() 方法返回一个 DOMRect 对象,其提供了元素大小及其相对于位置...DOMRect 可以理解为将元素看出一个矩形,该对象包含了该矩形位置、大小信息,可以获得页面中元素左,上,右和下分别相对浏览器视窗位置。

2.8K21

JS offset、scroll、client总结

1. offset offset 指偏移,包括这个元素在文档占用所有显示宽度,包括滚动条、padding、border,不包括overflow隐藏部分 offsetParent属性返回一个对象引用...,包括padding,不包括滚动条、border scrollHeight 获取对象滚动高度,对象实际高度; scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容最左端之间距离...被折叠起来部分,不包括滚动条、border,包括padding clientWidth 对象可见宽度,不包括滚动条等边线,会随窗口显示大小改变 clientHeight 对象可见高度 clientTop...因为滚动条不会出现在顶部或者左侧 ---- 网上帖子大多深浅不一,甚至有些前后矛盾,在下文章都是学习过程总结,如果发现错误,欢迎留言指出~ 参考: javascriptoffset、client...、scroll总结笔记 轻松弄清JavaScriptoffset、scroll、client offset client scroll screen 关键字整理

2.1K30

JavaScript Window - 浏览器对象模型浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。浏览器对象模型 (Browser Object Model)1 Wi

由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 方法和属性。 1 Window 对象 所有浏览器都支持 window 对象。...所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象成员。 全局变量是 window 对象属性。 全局函数是 window 对象方法。...("header"); Window 尺寸 有三种方法能够确定浏览器窗口尺寸(浏览器口,不包括工具栏和滚动条)。...或者 document.body.clientHeight document.body.clientWidth 实用 JavaScript 方案(涵盖所有浏览器): var w=window.innerWidth...2 JavaScript Window Location 获得当前页面的地址 (URL),并把浏览器重定向到新页面 2.1 Window Location window.location对象在编写时可不使用

51820

彻底玩转图片懒加载及底层实现原理

前言 图片懒加载其实已经是一个近乎“烂大街”词语了,在大大小面试也会被频繁问到,我在之前面试也被问到了图片懒加载原因、实现方式及底层原理,但由于自己平时很少做“图片”相关处理,对于“懒加载...“图片来源Seven's Blog 思路分析 通过上面三个 API,我们获得了三个值:可视区域高度、元素相对于其父元素容器顶部距离、浏览器窗口顶部与容器元素顶部距离也就是滚动条滚动高度。...()用于获得页面某个元素左,上,右和下分别相对浏览器视窗位置。...“这里我们参考阮一峰大佬关于IntersectionObserver API[3]介绍。 我们在平时开发,常常需要了解某个元素是否进入了"口"(viewport),即用户能不能看到它。 ?...由于可见(visible)本质是,目标元素与口产生一个交叉,所以这个 API 叫做交叉观察器。 使用 它用法也非常简单。

90031
领券