Scrolling issue in Firefox and Webkit browsers - side navigation, text truncation and scrolling

Question

I have a problem with the scrollbar view in different browsers. In my example, I would like to correctly display truncated text inside the side navigation component, but it does not display correctly in Firefox / IE browsers.

Check this script on both Chrome and Firefox (the code is not in the message, as it takes up a lot of space):

https://jsfiddle.net/d84b9m49/10/

As you can see, the problem is positioning the scrollbar in Webkit browsers compared to Firefox / IE, it is obvious that Firefox displays the scrollbar in the right fill area (only 65 pixels (width set to 65 pixels in style)), and on Chrome displays a scroll bar is the right pane, filling (of 85 pixels (65 pixels + width of the scroll bar). In of Firefox , when a scroll bar appears, the contents of the item lidisplayed is not centered , as part of the text is displayed below the scroll bar (and the horizon appears Ordering a scroll bar), and Chrome all looks right (all the center) In addition, the documentation describes this difference in scrollbar processing (QUESTION 1):

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

The previous solution is related to using max-width: 65px(check this script ), but this is not an option, since if there is only short text, the width of the side navigation will decrease and the width should not change due to the text (maybe there are some simple fixes for this problem? )

Please do not ignore the layout of the navigation component on smaller devices below 768px (in the example above, it becomes the “bottom” navigation).

I would like to make the elements inside the navigation component centered in Chrome and Firefox, until I ignore IE.

Can someone help me with this problem? Any help would be appreciated.

:. ( , ).

Answer 1

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

JQuery /.

-

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 2

.

.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

Answer 3

Its a problem with the Firefox scrollbar. We can fix this problem by adding padding-right: 18px(which is the scroll width) to the overflow-y element, Example

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

you can now set the width to 65 pixels ...