如何计算滚动条的宽度？ [英] How to calculate the width of the scroll bar?

问题描述

给定一个< textarea> 并且固定宽度，我希望它的活动宽度为常量（在 px 中）。 有效宽度是指文本出现的区域。

当垂直滚动条没有出现时，活动宽度等于 width 。但是，当垂直滚动条出现时，活动宽度变得小于 width （我认为滚动条的宽度更小）。

我想确定垂直滚动条是否出现，如果是，则增加< textarea> 的宽度。按滚动条的宽度。如何识别滚动条的宽度？

是否有更好的方法？

如果它让生活变得更容易，那么它就会对Firefox有兴趣。）

解决方案

有一个jQuery插件可以帮助解决这个问题： https://github.com/brandonaaron/jquery-getscrollbarwidth/blob/master/jquery.getscrollbarwidth .js

另外，从 http：/ /www.alexandre-gomes.com/?p=115
以下是一些可能有所帮助的代码。

这会在<>内以100％宽度创建一个隐藏的< p> 带滚动条，然后计算< div> 宽度 - < p> width =滚动条宽度。

  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 =隐藏; 
 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）; 
}; 
  




Given a <textarea> with a fixed width, I would like its "active width" to be constant (in px). By "active width" I mean the area where the text appears.

When the vertical scroll bar doesn't appear, the "active width" equals to width. But, when the vertical scroll bar appears, the "active width" becomes smaller than width (I guess smaller exactly by the width of the scroll bar).

I thought to identify whether the vertical scroll bar appears or not, and if yes, to increase the width of the <textarea> by the width of the scroll bar. How could I identify the width of the scroll bar?

Is there a better approach?

(I'm interested in Firefox, if it makes the life easier.)

解决方案

There is a jQuery plugin that can help with this: https://github.com/brandonaaron/jquery-getscrollbarwidth/blob/master/jquery.getscrollbarwidth.js

Also, from http://www.alexandre-gomes.com/?p=115 Here is some code that may help.

This creates a hidden <p> element at 100% width inside a <div> with a scrollbar, then calculates the <div> width - the <p> width = scroll bar width.

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); 
}; 

这篇关于如何计算滚动条的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！