时间戳

首页 > 解决方案 > 如何从 Mozilla Firefox 隐藏滚动条？

html - 如何从 Mozilla Firefox 隐藏滚动条？

问题描述

CSS 从 Mozilla Firefox 隐藏滚动条，因为我们可以从 chrome 中隐藏它，例如：-

::-webkit-scrollbar

标签： htmlcssscrollbar

解决方案

您可以执行以下操作

<div style='width: 100%;height:300px;'>
     <div style='height: 100%; overflow: auto; margin-right: -15px;'>
          //your overflowing content
     </div>
</div>

这里父 div 的高度取决于您的用例。

内部 div 中的 margin-right 属性是滚动条宽度，可以从 javascript 计算如下。

var div = document.createElement('div');
div.setAttribute('style', "width: 100%;height: 100%;position: absolute;overflow: auto;visibility: hidden;");
document.body.appendChild(div);
div.innerHTML = '<div style="width: 100%;height: 200%;"></div></div>';
var scrollWidth = div.offsetWidth - div.clientWidth;
div.parentNode.removeChild(div);
return scrollWidth;

您必须将返回的“ scrollWidth ”数据设置为子容器的负“ margin-right ”。

这适用于所有浏览器。

注意：margin-right属性应在检查内容是否溢出后设置。否则你会遇到一些宽度问题。

推荐阅读