js获取页面滚动条宽度

let cached;
function getScrollBarSize(fresh){//fresh 是否重新获取, cached: 是否获取过if(fresh || cahced===undefined) {const inner = document.createElement('div');inner.style.width = '100%';inner.style.height = '200px';const outer = document.createElement('div');outer.style.position = 'absolute';outer.style.top =  0;outer.style.left = 0;outer.style.visibility = 'hidden';outer.style.width = '200px';outer.style.height = '150px'; //父元素高度比内部元素高度小outer.style.overflow = 'hidden';outer.appendChild(inner);document.body.appendChild(outer);const widthContained = inner.offsetWidth;outer.style.overflow = 'scroll'; //让滚动条显示出来let widthScroll = inner.offsetWidth; //offsetWidth: content+padding+borderif(widthContained === widthScroll){widthScroll = outer.clientWidth; //clientWidth： content + padding}document.body.removeChild(outer);/**const widthContained = outer.offsetWidth;const widthScroll = outer.clientWidth;document.body.removeChild(outer);**/cached = widthContained - widthScroll}return cached;
}

js获取页面滚动条宽度相关推荐

JS 获取页面滚动条的高度
function getScrollTop() {let scroll_top = 0;if (document.documentElement && document.documen ...
原生js获取html元素高度,js获取页面及个元素高度、宽度的代码
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...
js获取浏览器滚动条距离顶端的距离
js获取浏览器滚动条距离顶端的距离一.jQuery获取的相关方法 jquery 获取滚动条高度获取浏览器显示区域的高度 : $(window).height(); 获取浏览器显示区域的宽度 : ...
js获取页面光标坐标（x轴y轴）
问题详情 js获取页面光标坐标(x轴y轴) 解决方案 // 获取当前位置 getPosition() {setTimeout(() => {// 获取当前光标位置getSelection()co ...
js: 获取页面最大的zIndex(z-index)值
js: 获取页面最大的zIndex(z-index)值 // 需要在页面渲染完毕之后执行function getMaxZIndex(){let arr = [...document.all].map( ...
js 获取页面鼠标选中的文字
js获取页面鼠标选中的文字,最主要的代码 event.selection = window.getSelection(); 页面代码 <div><p class="cont ...
js获取页面高度获取视口高度获取内容高度获取滚动条宽度高度
element对象的宽高属性 1. DOM树 2.document对象 3.element对象 4. 获取元素高度宽度 1. DOM树浏览器根据DOM模型,将结构化文档HTML解析成节点,DOM的最 ...
如何获得当前屏幕顶端距离整个页面最上端的距离(即js获取浏览器滚动条距离顶端的距离)
最近在做项目的时候遇到需要用js获取滚动条距离窗口顶端的距离和js获取浏览器可视化窗口的大小,在这儿做一个整理保存: 一.jQuery获取的相关方法 Js代码 jquery 获取滚动条高度 ...
js获取页面的各种高度与宽度
document.body.scrollTop等属性可以获取页面滚动距离等,但是此类属性在xhtml标准网页或者更简单的说是带<!DOCTYPE ..>标签的页面里得到的结果是0, 所以一 ...

js获取页面滚动条宽度

js获取页面滚动条宽度相关推荐

最新文章

热门文章