Загадка со странной функциональностью полосы прокрутки HTML / JS / CSS

Question

Итак, у меня есть уникальная цель, которую я хочу достичь с помощью CSS, HTML и jQuery. По сути, у меня есть элемент страницы, который при наведении на него мыши, я хочу, чтобы прокрутка была отключена. В настоящее время я достигаю этого, устанавливая свойство переполнения тела в значение «скрытый». Однако исчезающие полосы прокрутки означают, что содержимое смещается вправо, чтобы заполнить пустоту, созданную исчезающей вертикальной полосой прокрутки. Можно ли заставить страницу вести себя как переполнение: скрыто, но все еще отображаются заполнители полосы прокрутки?

Answer 1

Вы можете сделать это, имея div внутри div, так что внешний div можно прокручивать (auto), а затем изменить размер внутреннего div при наведении курсора на точно правильный размер.

Так, к примеру...

HTML :

<div id="outerTest" >
    <div id="innerTest" >
        ...content goes here...
    </div>
</div>

CSS :

#outerTest {
    width: 100px;
    height: 100px;
    overflow: scroll;
}
#innerTest {
    overflow: hidden;
}

jQuery :

$("#outerTest").hover(function() {
    $("#innerTest").css({width: "100%", height: "100%"});
}, function() {
    $("#innerTest").css({width: "auto", height: "auto"});
});

Answer 2

Кроме того, вы также можете реализовать полосу прокрутки на основе jQuery. JScrollPane