移除jQuery滚动条

Question

我正在开发一个WordPress插件（目前使用Twenty Thirteen主题），当您单击

时，会显示模态框。每当模态框显示时，我希望移除body上的滚动条。

我尝试使用下面的代码，但似乎不起作用：

jQuery("#page").css("overflow", "hidden");
jQuery('body').css('overflow','hidden');

我在Firebug中看到了style="overflow: hidden;"的添加，但滚动条仍然显示。

我也尝试使用!IMPORTANT，例如jQuery('body').css('overflow','hidden!IMPORTANT');，但仍然无法正常工作。

希望有人能帮助我解决这个问题。

谢谢！

- Eddie

---

同时在 body 上设置窗口高度。 - kag

Answer 1

jQuery('body').css({
'overflow': 'hidden'
'height'  : $( window ).height()
});

- kag

---

这只是禁用了滚动条.. 但我仍然可以看到滚动条。 - Eddie

你是否设置了margin:0和padding:0，这是默认出现在body上的。 - kag

Answer 2

请看我的fiddle: 这里

因为你的body没有固定的高度，所以它不会溢出，因此overflow本身并没有什么作用。当对话框可见时，请在你的body中添加一个height。

body.dialog-visible {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

- Will Reese

---

这只是禁用了滚动条.. 但我仍然可以在浏览器上看到滚动条。 - Eddie

Answer 3

使用以下 CSS 代码来移除滚动条：

::-webkit-scrollbar { 
    display: none; 
}

请确保使用正确的标签，否则它会隐藏所有滚动条。

- Sandhya Gor

Answer 4

请添加以下样式：

<style>
BODY #s4-workspace 
{
OVERFLOW-X: hidden !important;OVERFLOW-Y: hidden !important;
}
</style>

这将移除两个滚动条。

- TheBeginner