首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何获取浏览器的滚动条大小?

如何获取浏览器的滚动条大小?
EN

Stack Overflow用户
提问于 2009-06-12 14:30:06
回答 24查看 160.4K关注 0票数 177

如何在JavaScript中确定水平滚动条的高度或垂直滚动条的宽度?

EN

回答 24

Stack Overflow用户

回答已采纳

发布于 2009-06-12 14:37:09

我还没有在Alexandre Gomes Blog上尝试过。如果对你有效,请让我知道。

代码语言:javascript
复制
function getScrollBarWidth () {
  var inner = document.createElement('p');
  inner.style.width = "100%";
  inner.style.height = "200px";

  var outer = document.createElement('div');
  outer.style.position = "absolute";
  outer.style.top = "0px";
  outer.style.left = "0px";
  outer.style.visibility = "hidden";
  outer.style.width = "200px";
  outer.style.height = "150px";
  outer.style.overflow = "hidden";
  outer.appendChild (inner);

  document.body.appendChild (outer);
  var w1 = inner.offsetWidth;
  outer.style.overflow = 'scroll';
  var w2 = inner.offsetWidth;
  if (w1 == w2) w2 = outer.clientWidth;

  document.body.removeChild (outer);

  return (w1 - w2);
};
票数 144
EN

Stack Overflow用户

发布于 2013-09-26 05:10:20

使用jQuery,您可以将Matthew Vines的答案缩短为:

代码语言:javascript
复制
function getScrollBarWidth () {
    var $outer = $('<div>').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'),
        widthWithScroll = $('<div>').css({width: '100%'}).appendTo($outer).outerWidth();
    $outer.remove();
    return 100 - widthWithScroll;
};
票数 82
EN

Stack Overflow用户

发布于 2014-04-01 14:33:23

如果您正在寻找一种简单操作,只需混合使用普通dom js和jquery,

代码语言:javascript
复制
var swidth=(window.innerWidth-$(window).width());

返回当前页面滚动条的大小。(如果它可见,否则将返回0)

票数 26
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/986937

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档