Изменение полосы прокрутки страницы

Ответ 1

Вы можете установить overflow-y: scroll как правило для своего тела. Это всегда будет отображать вертикальную полосу прокрутки, которая отключена, если контент не будет достаточно длинным для прокрутки. Таким образом, контент не будет перемещаться влево, если он достаточно длинный, чтобы вы могли прокручивать, а для выполнения этой работы не требуется никаких сценариев.

Ответ 2

если вы не нуждаетесь в полосе прокрутки вообще, вы можете использовать это:

body {
    overflow-y: hidden;
}

UPD., поэтому, если вам нужна полоса прокрутки для прокрутки содержимого, но вы хотите скрыть его, вы можете использовать следующий метод (демонстрация на dabblet.com):

CSS

body {
    overflow: hidden;
}

#fake_body {
    position: absolute;
    left: 0;
    top: 0;
    right: -32px;
    bottom: 0;
    overflow-y: scroll;
}

HTML:

<div id="fake_body">
    <ul>
        <li>content content content #01</li>
        <li>content content content #02</li>
        <li>content content content #03</li>
        …
        <li>content content content #55</li>
    </ul>
</div>

Ответ 3

У меня была такая же проблема, и только решение с использованием JS/jQuery было достаточно хорошим для меня.

Я использовал ссылку на Обнаружение, если страница имеет вертикальную полосу прокрутки?, предоставленную ранее, и эти ссылки: http://davidwalsh.name/detect-scrollbar-width, http://api.jquery.com/css/#css2, Центрировать позицию: фиксированный элемент для создания следующего кода.

CSS

body {
    position: absolute;
    left: 50%;
    margin-left: -400px;
    width: 800px;
    height: 100%;
}

.scrollbar-measure {
    width: 100px;
    height: 100px;
    overflow: scroll;
    position: absolute;
    top: -9999px;
}

JS:

$(document).ready(function() {
    // Check if body height is higher than window height :)
    if ($(document).height() > $(window).height()) {

        // Create the measurement node
        var scrollDiv = document.createElement("div");
        scrollDiv.className = "scrollbar-measure";
        document.body.appendChild(scrollDiv);
        // Get the scroll bar width
        var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
        // Delete the DIV
        document.body.removeChild(scrollDiv);

        // Change margin-left parameter for #container for preventing shift caused by scroll bar
        var current_margin_left_px = $("#container").offset().left;
        var current_margin_left = parseInt(current_margin_left_px, 10);
        var changed_margin_left = current_margin_left + scrollbarWidth/2 + "px";
        $("#container").css("margin-left", changed_margin_left);
    }
});

В случае гибкой ширины корпуса необходимо добавить еще один код.

Ответ 4

вы можете проверить, имеет ли экран полосу прокрутки. если это правда, чем вы могли бы поместить контент вправо, возможно, эта ссылка поможет вам: Обнаружить, если страница имеет вертикальную полосу прокрутки?

Ответ 5

В браузерах не поддерживается следующее: MDN docs, однако, я думаю, вам может показаться интересным.

overflow-y: overlay;

В браузерах, которые поддерживают это свойство, например Google Chrome, это приведет к тому, что полоса прокрутки будет поверх вашего контента вместо того, чтобы переносить содержимое, когда требуется полоса прокрутки. Затем вы можете добавить достаточное количество дополнений, чтобы ваш контент никогда не был закрыт им.

Похоже, это свойство не пользуется популярностью, и даже браузеры, которые его поддерживают, планируют отказаться от поддержки. Я не понимаю, почему, потому что он, безусловно, имеет свои преимущества.

Ответ 6

overflow-x: hidden;

в теле CSS-код, ПОМОГИТЕ ВСЕ! Черт, взял меня на 45 минут, чтобы побродить по упрощенному ответу.

что пошло не так?... У меня был объект hover = show image. Я правильно изменил все изображения; когда я обновил страницу, полоса прокрутки имела способ много играть в комнату!..... Итак, я поместил переполнение-x в каждый тег div (каждый тег div, назначенный отдельному элементу списка), и ничего не произошло! Решение: код был верным, но место размещения должно было находиться в теге body. а не отдельные теги div. Блин..... thankz