如果页面具有垂直滚动条，则尝试使用 Javascript 隐藏元素答案

【问题标题】：Trying to use Javascript to hide an element if a page has a vertical scroll-bar如果页面具有垂直滚动条，则尝试使用 Javascript 隐藏元素
【发布时间】：2012-11-08 06:24:43
【问题描述】：

当且仅当页面（html，正文）具有垂直滚动条时，我试图隐藏 ID 为 #myWork 的元素。在阅读了关于检测垂直滚动条存在的另一个问题/答案后，我有以下代码：

var hasVScroll = document.body.scrollHeight > document.body.clientHeight;
        var cStyle = document.body.currentStyle||window.getComputedStyle(document.body, "");
        hasVScroll = cStyle.overflow == "visible" || cStyle.overflowY == "visible" || (hasVScroll && cStyle.overflow == "auto") || (hasVScroll && cStyle.overflowY == "auto");
        if(hasVScroll){
            document.getElementById('myWork').style.display = 'none';
        }

这可行，但当此 html 页面上没有垂直滚动条时，它也会隐藏 id 为 myWork 的元素。

我衷心感谢所有帮助以解决此问题。

附：因为我已经在使用 jQuery，所以我尝试在 if 语句中使用 jQuery 隐藏它，但这也不起作用。

【问题讨论】：

好吧，如果它隐藏了元素，这意味着cStyle.overflow == "visible" || cStyle.overflowY == "visible" 的计算结果可能为真。所以这可能与你的 CSS 有关？如果没有，您是否在所有浏览器上对此进行了测试？如果第一行不是跨浏览器，我不会感到惊讶。
@bellpeace 我不认为这是一个 CSS 问题，因为当脚本关闭时，该站点很好。我只在 chrome 中测试过。

标签： javascript jquery

【解决方案1】：

如果您已经在使用 jQuery，这应该可以工作：

function init(e){
    var hasVScroll = $(document).height( ) > $(window).height( );

    if(hasVScroll){
        $('#myWork').hide( );
    }

}

$(document).ready(init);

好的，所以它不工作的原因是这个

var cStyle = document.body.currentStyle||window.getComputedStyle(document.body, "");
hasVScroll = cStyle.overflow == "visible" || cStyle.overflowY == "visible" || (hasVScroll && cStyle.overflow == "auto") || (hasVScroll && cStyle.overflowY == "auto");

总是将 hasVScroll 设置为 true。

希望这会有所帮助。

【讨论】：

哦，好吧，所以逻辑是错误的，它总是导致 true？这是有道理的，为什么它总是有效。啊，我明白你做了什么。我没有想到文档是整个文档和窗口只是当前窗口/视口之间的区别。谢谢。
这是一种可以在 chrome 中测试上述内容的方法：按 CTRL+SHIFT+J 调出控制台，粘贴上面的两行（设置 cStyle 和 hasVScroll 的行）并回车 - - 它应该产生真实的。它总是正确的，因为 cStyle.overflow 和 cStyle.overflowY 在 body 上都默认为“可见”。