2

Доброго времени суток! Столкнулся с известной проблемой, но никак не могу ее решить, помогите найти хорошее решение. В общем, имеется сайт на bootstrap простенький, при увеличении высоты страницы появляется вертикальный скрол который добавляет ширину в следствии чего страница заметно прыгает, как бы избежать этого прыжка, да и вообще может появления скрола.

Пример:

<div class="master">
    <div class="element"></div>
</div>

Скрола нет:

.element {
    width: 100%;
    height: 100%;
    background-color: red;
}

Скрол есть:

.element {
    width: 100%;
    height: 900%;
    background-color: red;
}

update: Страница написана на bootstrap и если просматривать ее с мобильных устройств то такой проблемы там нет

8
  • Да вроде это никто не решает, страница должна быть по центру и все. И при чем тут padding? Это же просто уменьшение ширины окна. Commented 14 июн. 2017 в 17:17
  • Вы не поняли, при появлении скрол имеет свою ширину и он отодвигает остальные элементы, что приводит к скачку
    – noanother
    Commented 14 июн. 2017 в 18:50
  • я именно так и понял Commented 14 июн. 2017 в 19:36
  • ассоциация: stackoverflow.com/questions/18548465/…
    – Crantisz
    Commented 14 июн. 2017 в 20:16
  • Эм.. Вот уменьшение width при появлении скролла - это я понимаю. но увеличение-то как?
    – Qwertiy
    Commented 14 июн. 2017 в 20:54

2 ответа 2

1

Зачем отключать скроллбар? Высота может быть больше экрана? Сделайте скролл постоянно видимым и скачка не будет и доступ к прокрутке будет.

body { overflow-y: scroll; }
1
  • да, но нужно без постоянного скрола, лучше вообще без него, или с ним, но без увеличивающегося width
    – noanother
    Commented 14 июн. 2017 в 20:40
0

Если хотите просто отключить скрол, он отключается так:

body{
 overflow-y:hidden
} 

А в этом ответе есть такое решение: определяем ширину скрола и вычитаем такой marign:

var checkScrollBars = function(){
    var b = $('body');
    var normalw = 0;
    var scrollw = 0;
    if(b.prop('scrollHeight')>b.height()){
        normalw = window.innerWidth;
        scrollw = normalw - b.width();
        $('.element').css({marginRight:'-'+scrollw+'px'});
    }
}

$(function(){
    $('button').click(function(){
        $('.element').toggleClass('big')
        checkScrollBars();
    })
    checkScrollBars();
    $(window).resize(function(){
        checkScrollBars();
    })
});
body{
overflow-x:hidden;
}
.element {
    
    text-align:center;
    height: 90vh;
    background-color: red;
}
.element.big {
    height: 900vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element"><button>Нажмите</button></div>

6
  • без jquery бы, пробовал: 100vw - 100% не работает
    – noanother
    Commented 14 июн. 2017 в 20:43
  • с 100% шириной, естественно, margin не работает, ширина должна быть auto. Про jquery не понял
    – Crantisz
    Commented 14 июн. 2017 в 20:49
  • в первом окне вы используете $
    – noanother
    Commented 14 июн. 2017 в 20:50
  • и что? Это запрещено законом?
    – Crantisz
    Commented 14 июн. 2017 в 20:52
  • закон не при чем, у меня в проекте он не предусматривается просто.. а так бы да
    – noanother
    Commented 14 июн. 2017 в 20:53

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.