Vertical Scrollbar leads to horizontal scrollbar

后端未结

关注

 5  1219

My CSS looks like this:

div.SOMECLASS {
  position: absolute;
  max-height: 300px
  height: auto;
  width: auto;
  overflow: auto;
  ...
}

相关标签:

5条回答

北荒

2020-12-15 03:43

I found a solution which is working but far from perfect:

I added a padding-right : 15px to my div, to automatically grow the entire div. Now if the vertical scrollbars appear, they fit within the padding so the horizontal width is still ok.

Regretfully the padding of course also shows up when no vertical scrolling is needed, making my div just a tiny bit wider than it would have to be... :/ Well, in my eyes this is still preferable to unneeded horizontal scrollbars.

0 讨论(0)
发布评论:

提交评论
- 加载中...
南方客

2020-12-15 03:47
Number 1 search result on Google for my problem (similar to OP, but not the same).

Here is a common scenario for seemingly unnecessary-horizontal-scrollbar:

You have an element, say, a table, which uses auto-sizing. If the auto-sizing is done before all the rows are added, then it will not calculate enough room for a vertical-scrollbar. Doing the resize after adding rows fixed my issue -- even then, I needed a timeout
```
this.http.get('someEndPoint').subscribe(rows => {
  this.rowData = rows;
  setTimeout(()=>{sizeColumnsToFit()}, 50);
});
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
小蘑菇

2020-12-15 03:49
Just figured out a pretty passable solution (at least for my version of this problem).

I assume the issue with width: auto is that it behaves similarly to width: 100vw; the problem is that when the vertical scrollbar appears, the viewport width remains the same (despite the ~10px scrollbar), but the viewable area (as I'm calling it) is reduced by 10px.

Apparently defining width by percentage defines it in terms of this "viewable area", so changing your code to:
```
div.SOMECLASS {
  position: absolute;
  max-height: 300px
  height: auto;
  width: 100%;
  overflow: auto;
  ...
}
```
should allow the content to rescale properly!

p.s. You can also instead add overflow-x: hidden, which will stop the horizontal scrollbar from appearing, instead simply cutting ~10px off of the right side of your div when the vertical scrollbar appears.
0 讨论(0)
发布评论:

提交评论
- 加载中...

孤街浪徒

2020-12-15 03:50

This bug (specific to Firefox) occurs even when not setting a fixed width.

For instance, if you have a vertically scrollable container div (overflow: auto;) inside a flexible wrapper div (display: inline-block;), then when you resize the window to be smaller than the content can wrap, first, a horizontal scrollbar will appear in your container div, and only after that, the flexible wrapper div will grow or eventually a secondary horizontal scrollbar will appear in your window.

The result is a useless horizontal scrollbar, that only can scroll the width of the vertical scrollbar:

In order to get rid of this issue, you could use the javascript-code from this example (tested in Firefox and Chromium):

<!DOCTYPE html>
<html>
<body>
    <style type="text/css">
    .page {height: 200px;width: 400px;overflow: auto;background-color: #ccc;border: 5px solid #000;margin: 5px;}
    .wrapper {display: inline-block;min-width: 100%;margin: 20px;}
    .scroller {overflow: auto;max-height: 100px;background-color: #f00;}
    .content {min-height: 500px;min-width: 400px;background-color: #cfc;}
    </style>
    <div class="page">
        <div class="wrapper">
            <div class="scroller">
                <div class="content">
                    The wrapper-div should expand to fit the scroller content.
                    Reduce the browser window width, and a useless horizontal scrollbar appears.
                </div>
            </div>
        </div>
    </div>
    <div class="page">
        <div class="wrapper">
            <div class="scroller ensure-scrollbar-width-padding">
                <div class="content">
                    But with the javascript-function, this is now fixed.
                    There is no horizontal scrollbar in the wrapper-div.
                </div>
            </div>
        </div>
    </div>
    <script>
    var ensureScrollbarWidthPadding = function(elem)
    {
        if(!parseInt(elem.scrollWidth) || !parseInt(elem.clientWidth) || !parseInt(elem.offsetWidth))
        {
            return; // no browser-support for this trick
        }

        var update = function()
        {
            // reset to as if not having any right-padding
            elem.style.paddingRight = '0px';

            // check if horizontal scrollbar appeared only because of the vertical scrollbar
            if(elem.scrollWidth !== elem.clientWidth)
            {
                elem.style.paddingRight = (elem.offsetWidth - elem.clientWidth) + 'px';
            }
            else
            {
                elem.style.paddingRight = '0px';
            }
        };

        window.addEventListener('resize', update, false);
        window.addEventListener('load', update, false);

        update();

        return update;
    };

    (function()
    {
        var elems = document.getElementsByClassName('ensure-scrollbar-width-padding');
        for(var i=0;i<elems.length;++i)
        {
            ensureScrollbarWidthPadding(elems[i]);
        }
    })();
    </script>
</body>
</html>

The javascript function ensureScrollbarWidthPadding dynamically adds a padding-right to the vertically scrollable container, to ensure that the horizontal scrollbar will never appear.

0 讨论(0)

野趣味

2020-12-15 03:58

Often setting 100vw is the problem. Just remove it and your width will be 100%, which will be what you want anyways.

0 讨论(0)
发布评论:

提交评论
- 加载中...