如何摆脱不需要的滚动条答案

【问题标题】：how to get rid of unneeded scroll bars如何摆脱不需要的滚动条
【发布时间】：2013-05-18 03:09:50
【问题描述】：

我有一个 DIV，其中包含一个表，当添加或删除行或列时，该表的大小明显增加或缩小，当发生这种情况时，必须相应地调整容器 DIV 的大小。如果浏览器的窗口不足以显示整个表格，则 DIV 必须包含必要的滚动条，否则不应显示滚动条。小菜一碟，不是吗？

在 IE 10 上，一切正常，但在 Chrome 和 Safari 中，即使不需要，也会出现 2 个丑陋的滚动条……至少当我检查 DIV 对象属性并看到这一点时，我是这么理解的：

this.offsetWidth = 642
this.scrollWidth = 638

所以不需要水平滚动条吧？

this.offsetHeight = 420
this.scrollHeight = 416

所以不需要垂直滚动条，对吧？

但即便如此，两个滚动条都会显示...如果我最小化浏览器的窗口然后恢复它，两个滚动条都会消失，就好像浏览器意识到它们是不必要的一样。如果我切换到另一个应用程序然后返回浏览器，以及当我单击页面上的任何输入字段时，也会发生同样的情况。所以这显然是一个错误，但无法解决。

我尝试了以下方法：

this.style.overflow = "hidden";
this.style.left = q/2+"px";
this.style.width = v+"px";
this.style.top = p+"px";
this.style.height = i+"px";
this.style.overflow = "auto";

但我仍然得到相同的行为。

【问题讨论】：

还有哪些其他样式在起作用，我知道很多样板代码确保滚动条始终存在，以避免由于滚动条从短页面转到长页面时网站跳转。
你试过overflow-y了吗？

标签： javascript google-chrome safari scroll

【解决方案1】：

解决了！！！

它正好在我的鼻子前面，但我花了一些时间才意识到：

this.style.overflow = "hidden";
this.style.left = q/2+"px";
this.style.width = v+"px";
this.style.top = p+"px";
this.style.height = i+"px";    
if(this.scrollHeight>this.offsetHeight) this.style.overflowY = "auto";
if(this.scrollWidth>this.offsetWidth) this.style.overflowX = "auto";

【讨论】：