JS禁用时visibility:hidden的div仍占空间，如何使其不被处理？

当前使用如下HTML代码：

<div id="icons_js" style="visibility:hidden;"><a href="#gototop" title="Seitenanfang"><img src="img/toparrow.png" class="icons" border="0"></A>&nbsp;&nbsp;<a href="biografie_de.php" title="zurück"><img src="img/leftarrow.png" class="icons" border="0"></a></div>
<noscript>test</noscript>

该div通过visibility:hidden默认隐藏，仅在用户滚动时由JS控制显示。JS启用时功能正常，但禁用JS后，这个div仍会在内容文本和页面底部之间占据空间。尝试用script标签包裹div导致关联脚本失效，现需实现：JS禁用时该div完全不占用空间（即不被渲染占位）

解决方案 #

方法1：CSS配合<noscript>控制display属性 #

核心思路是默认让div不占位（display:none），JS启用后再调整为占位隐藏状态，JS禁用时通过<noscript>强制保持不占位：

<style>
#icons_js {
    display: none; /* 默认不显示也不占位 */
}
</style>
<div id="icons_js"><a href="#gototop" title="Seitenanfang"><img src="img/toparrow.png" class="icons" border="0"></A>&nbsp;&nbsp;<a href="biografie_de.php" title="zurück"><img src="img/leftarrow.png" class="icons" border="0"></a></div>
<noscript>
    <style>
        #icons_js { display: none !important; }
    </style>
</noscript>
<script>
// 页面加载后先设置div为占位但不可见，再绑定滚动事件
document.addEventListener('DOMContentLoaded', function() {
    const iconsDiv = document.getElementById('icons_js');
    iconsDiv.style.display = 'block';
    iconsDiv.style.visibility = 'hidden';
    
    // 滚动显示逻辑（根据你的需求调整阈值）
    window.addEventListener('scroll', function() {
        iconsDiv.style.visibility = window.scrollY > 300 ? 'visible' : 'hidden';
    });
});
</script>

方法2：JS动态创建div元素 #

直接不在初始HTML中编写该div，仅当JS启用时才动态生成并插入页面，这样JS禁用时div根本不存在，自然不会有占位问题：

<noscript>test</noscript>
<script>
function createIconsDiv() {
    // 创建主div
    const iconsDiv = document.createElement('div');
    iconsDiv.id = 'icons_js';
    iconsDiv.style.visibility = 'hidden';
    
    // 构建回到顶部链接
    const topLink = document.createElement('a');
    topLink.href = '#gototop';
    topLink.title = 'Seitenanfang';
    const topImg = document.createElement('img');
    topImg.src = 'img/toparrow.png';
    topImg.className = 'icons';
    topImg.border = '0';
    topLink.appendChild(topImg);
    
    // 构建返回链接
    const backLink = document.createElement('a');
    backLink.href = 'biografie_de.php';
    backLink.title = 'zurück';
    const backImg = document.createElement('img');
    backImg.src = 'img/leftarrow.png';
    backImg.className = 'icons';
    backImg.border = '0';
    backLink.appendChild(backImg);
    
    // 组装元素（用CSS控制间距比&nbsp;更优雅，这里保留原逻辑）
    iconsDiv.appendChild(topLink);
    iconsDiv.appendChild(document.createTextNode('  '));
    iconsDiv.appendChild(backLink);
    
    // 插入到页面指定位置，比如body末尾
    document.body.appendChild(iconsDiv);
    
    // 绑定滚动事件
    window.addEventListener('scroll', function() {
        iconsDiv.style.visibility = window.scrollY > 300 ? 'visible' : 'hidden';
    });
}

// 页面加载完成后生成元素
document.addEventListener('DOMContentLoaded', createIconsDiv);
</script>

方法3：类名配合<noscript>强制隐藏 #

给div加一个默认隐藏类，JS启用时移除该类，JS禁用时通过<noscript>里的CSS将其改为不占位的隐藏：

<style>
.js-disabled-hide {
    visibility: hidden;
}
</style>
<div id="icons_js" class="js-disabled-hide"><a href="#gototop" title="Seitenanfang"><img src="img/toparrow.png" class="icons" border="0"></A>&nbsp;&nbsp;<a href="biografie_de.php" title="zurück"><img src="img/leftarrow.png" class="icons" border="0"></a></div>
<noscript>
    <style>
        .js-disabled-hide {
            display: none;
        }
    </style>
</noscript>
<script>
// JS启用后移除隐藏类，调整初始状态
const iconsDiv = document.getElementById('icons_js');
iconsDiv.classList.remove('js-disabled-hide');
iconsDiv.style.visibility = 'hidden';

// 滚动监听逻辑
window.addEventListener('scroll', function() {
    iconsDiv.style.visibility = window.scrollY > 300 ? 'visible' : 'hidden';
});
</script>

内容的提问来源于stack exchange，提问作者Leander Rednael