Firefox 与 Webkit 浏览器上的滚动问题 - 侧边导航、文本截断和滚动

Question

我对滚动条在不同浏览器上的外观有疑问。在我的示例中，我想在 side-navigation 组件内正确显示截断的文本，但它在 Firefox/IE 浏览器上显示不正确。

在 Chrome 和 Firefox 上查看此 fiddle（代码不在 post 中，因为它占用了很多 space）：

如您所见，与 Firefox/IE 相比，问题在于 Webkit 浏览器中滚动条的定位，显然 Firefox 在右侧填充区域内显示滚动条（总计 65px（宽度在样式中设置为 65px） ) 和 Chrome 在右填充区域外显示滚动条（总共 85px（65px + 滚动条宽度）。在 Firefox 中，当滚动条出现时，li 的内容项目出现 未居中 并且文本的一部分显示在滚动条下方（并且出现水平滚动条）并且在 Chrome 上一切看起来都是正确的（一切都是居中）。此外，文档描述了处理滚动条（问题 1）的差异：

https://drafts.csswg.org/css-overflow-3/#scrollable

之前的解决方案涉及使用 max-width: 65px（查看 this fiddle）但这不是一个选项，因为如果只有短文本，侧边导航的宽度会缩小，宽度应该没有因为文本而改变（也许这个问题有一些简单的解决方法？）

请不要忽视较小设备上导航组件的布局，低于 768px（在提供的示例中它变成 "bottom" 导航）。

我想在 Chrome 和 Firefox 中使导航组件内的项目居中，我们暂时忽略 IE。

有人可以帮我解决这个问题吗？任何帮助将不胜感激。

编辑： 为了将来参考，您可以根据您的要求选择下面任何一个赞成的答案（或者使用 滚动检查 方法，或者只是 删除滚动条 并添加一些箭头来滚动内容）。

Answer 1

它与 Firefox 滚动条有关的问题，我们可以通过向 overflow-y 元素添加 padding-right: 18px（即滚动宽度）来解决此问题，示例

.navbar {
    padding: 0;
    background:  #283030;
    height: 100%;
    overflow-y: auto;
  padding-right:18px;
}
li.nav-item {
  width: 65px;
}

您现在可以设置 65px 宽度...

Answer 2

根据我的评论，您可以通过

直接隐藏滚动条

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

或使用 JQuery 计算滚动条的宽度，并将相同的边距添加到 body/container。

试试这样的代码

var checkScrollBars = function(){
    var normalwidth = 0;
    var scrollwidth = 0;
    if($('body').prop('scrollHeight')>$('body').height()){
        normalwidth = window.innerWidth;
        scrollwidth = normalwidth - $('body').width();
        $('#container').css({marginRight:'-'+scrollwidth+'px'});
    }
}

水平滚动条

body{
overflow-x:hidden;
}

编辑

根据您的评论，如果您认为它的性能开销只计算一次滚动条宽度并在页面加载时默认添加它。

这样检查..

function scrollbarWidth() { 
    var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>'); 
    // Append our div, do our calculation and then remove it 
    $('body').append(div); 
    var w1 = $('div', div).innerWidth(); 
    div.css('overflow-y', 'scroll'); 
    var w2 = $('div', div).innerWidth(); 
    $(div).remove(); 
    return (w1 - w2); 
}

或者仅当内部宽度小于一些 <80px 时才调用这些函数（以上两个），像这样

if ($(window).width() < 85px) {
   //your function
}

Answer 3

这将删除滚动条。

.nav.navbar.navbar-inverse::-webkit-scrollbar { width: 0 !important }
.nav.navbar.navbar-inverse { -ms-overflow-style: none; }
.nav.navbar.navbar-inverse { overflow: -moz-scrollbars-none; }

在jsFiddle

上查看

Firefox 与 Webkit 浏览器上的滚动问题 - 侧边导航、文本截断和滚动

Scroll issue on Firefox vs Webkit browsers - Side navigation, text truncate and scroll

html

css

firefox

cross-browser

bootstrap-4