Вертикальная полоса прокрутки ведет к горизонтальной полосе прокрутки
Спасибо за тех, кто предложил Resharper. Дает мне еще одну причину любить его еще больше. Просто чтобы уточнить, где это происходит - JetBrains называют это CamelHumps (милый), и вы можете включить его, используя меню:
Resharper -> Options -> Environment -> Редактор -> Поведение редактора -> Использование CamelHumps
blockquote>... в старых версиях Resharper, это:
Resharper -> Options -> Редактор -> Использование CamelHumps
blockquote>
2 ответа
Я нашел решение, которое работает, но далеко не идеально:
Я добавил padding-right : 15px к своему div, чтобы автоматически увеличить весь div. Теперь, если появляются вертикальные полосы прокрутки, они вписываются в отступы, поэтому горизонтальная ширина все еще в порядке.
К сожалению, отступы, конечно, также обнаруживаются, когда не требуется вертикальная прокрутка, что делает мой div чуть чуть шире, чем должно было бы быть: .
Эта ошибка (характерный для Firefox) происходит, не устанавливая фиксированную ширину.
, Например, если у Вас есть вертикально контейнерное отделение с возможностью прокрутки (overflow: auto;) внутренняя часть гибкое отделение обертки (display: inline-block;), затем когда Вы изменяете размер окна, чтобы быть меньшими, чем содержание, может перенестись, во-первых, горизонтальная полоса прокрутки появится в Вашем контейнерном отделении, и только после этого, гибкое отделение обертки вырастет, или в конечном счете вторичная горизонтальная полоса прокрутки появится в Вашем окне.
результатом является бесполезная горизонтальная полоса прокрутки, это только может прокрутить ширину вертикальной полосы прокрутки:
для избавлений от этой проблемы, Вы могли использовать код JavaScript от этого примера (протестированный в Firefox и Хроме):
<!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>
функция JavaScript ensureScrollbarWidthPadding динамично добавляет padding-right к вертикально контейнеру с возможностью прокрутки, чтобы гарантировать, что горизонтальная полоса прокрутки никогда не будет появляться.