获取滚动条宽度(Element-UI之三)

代码如下

/*** 计算浏览器滚动条宽度* @returns {Number}*/
export default function () {const outer = document.createElement('div');outer.style.visibility = 'hidden';outer.style.width = '100px';outer.style.position = 'absolute';outer.style.top = '-9999px';document.body.appendChild(outer);const widthNoScroll = outer.offsetWidth; // 获取没有滚动条的元素宽度outer.style.overflow = 'scroll'; // 强制滚动条const inner = document.createElement("div"); // 内部创建元素inner.style.width = "100%";outer.appendChild(inner);const widthWithScroll = inner.offsetWidth; // 获取内部元素的可视区域，有滚动条outer.parentNode.removeChild(outer); // 移除创建的节点return widthNoScroll - widthWithScroll; // 获取浏览器滚动条宽度
};

获取滚动条宽度(Element-UI之三)相关推荐

html如何获取滚动条,js如何来实现获取滚动条宽度（代码示例）
本篇文章给大家带来的内容是关于js如何来实现获取滚动条宽度(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 思路:通过创建一个元素,不要给元素设置边框,然后给元素设置ove ...
js获取页面高度获取视口高度获取内容高度获取滚动条宽度高度
element对象的宽高属性 1. DOM树 2.document对象 3.element对象 4. 获取元素高度宽度 1. DOM树浏览器根据DOM模型,将结构化文档HTML解析成节点,DOM的最 ...
获取整个页面包括滚动条的宽度，获取滚动条宽度
更正!!!!!!!! 下面的代码没用了, 今天看到了 window.outerWidth 这个属性,直接就能取到整个页面包括滚动条的宽度:评论说 window.innerWidth 才是对的, 刚刚 ...
获取滚动条宽度代码（记录）
1.创建一个嵌套节点,让外层节点产生滚动条. 2.用offsetWidth - clientWidth 即可获得滚动条宽度. 为了避免页面抖动,可以设置外层元素position:absolute和 ...
element table滚动条占宽度_elementUI——scrollbar-width获取滚动条宽度
说明:以下基于elementUI@2.13.1. 在element-ui\src\utils\scrollbar-width.js中: import Vue from 'vue'; let scrol ...
Element UI 左侧折叠导航栏配合el-asid文字闪烁的问题，element-UI 中beforeLeave用法，echarts 无法获取属性“getAttribute”的值
Element UI 左侧折叠导航栏配合el-asid文字闪烁的问题 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eayAJOoj-1600259160168)(C: ...
Element ui table组件滚动条隐藏与样式修改
Element ui 虽然用起来方便,但是调整就比较麻烦了,尤其是这个table组件,一旦设定了height属性,数据多的时候就会自动出现滚动条,如果你改了其他的样式,这个滚动条就是十分难看,可以用下 ...
Vue + Element UI——滚动条el-scrollerbar和无限滚动指令v-infinite-scroll整合解决方案
基本概念 el-scrollbar:Element UI隐藏组件. 注意事项: 1.el-scrollbar的父层要有固定高度 2.el-scrollbar的高度要设成100% 3.如果出现横滚动条, ...
Element UI——滚动条组件(ElScrollBar)修改.el-scrollbar__wrap和el-scrollbar__view的CSS属性
基本概念 el-scrollbar:Element UI隐藏组件. 注意事项: 1.el-scrollbar的父层要有固定高度 2.el-scrollbar的高度要设成100% 3.如果出现横滚动条, ...

获取滚动条宽度(Element-UI之三)

获取滚动条宽度(Element-UI之三)

代码如下

获取滚动条宽度(Element-UI之三)相关推荐

最新文章

热门文章