当前位置: 首页 > 面试题库 >

JavaScript如何获得浏览器的滚动条大小?

司徒啸
2023-03-14
问题内容

如何在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);
};


 类似资料:
  • 问题内容: 如何定义跨浏览器的CSS滚动条样式?我测试了此代码,它仅在IE和Opera中起作用,但在Chrome,Safari和Firefox中失败。 问题答案: 滚动条CSS样式是Microsoft开发人员发明的一种奇怪方法。它们不是CSS的W3C标准的一部分,因此大多数浏览器只是忽略它们。

  • 问题内容: 当我有一个带有可滚动内容的网页时。使用css属性“ overflow:auto”或“ overflow:visible”,滚动条在桌面浏览器上可见,但是当我在移动浏览器上打开页面时,滚动条仅在尝试滚动时出现。有没有一种方法可以使滚动条在移动设备上始终可见?我尝试了一些JQuery库,但是都没有用。 html代码是微不足道的,我有一个带有IFrame的可滚动div: CSS: 问题答案:

  • 本文向大家介绍jQuery实现浮动层随浏览器滚动条滚动的方法,包括了jQuery实现浮动层随浏览器滚动条滚动的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现浮动层随浏览器滚动条滚动的方法。分享给大家供大家参考。具体如下: 这是jQuery实现的一个浮动层效果,随浏览器滚动条而滚动,并一直保持在顶部位置,请使用火狐测试,IE下表现不尽理想。 运行效果截图如下: 在线演示

  • 问题内容: 我想始终在网页中显示垂直滚动条。是否可以使用javascript?我认为可以使用javascript或jQuery。我要垂直滚动条是否有足够的内容来显示或不显示。 谢谢。 问题答案: 不需要jQuery。您可以尝试添加CSS: 这适用于最新的浏览器,甚至IE6。

  • 问题内容: 我正在设计网站的新布局,并且遇到了GIZMODO网站,我发现该网站可以利用页面滚动条来滚动网站中的部分内容。他们怎么做呢?我通过Firebug研究了他们的CSS,但是我很困惑。 这是我的测试页面1:此页面可以使内容居中,但不能根据需要滚动) 这是我的测试页面2::(此页面可以根据需要滚动,但无法居中) 我只想使页面的左侧内容与页面滚动条一起滚动,但右侧内容保持原始位置,并且整个网站应居

  • 本文向大家介绍原生js仿浏览器滚动条效果,包括了原生js仿浏览器滚动条效果的使用技巧和注意事项,需要的朋友参考一下 效果图: 代码如下: 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!