Ползунок прокрутки при overflow scroll. Возможность переместиться по блоку

Question

У меня есть блок в блоке и мне нужно добиться, чтобы у блока second_div снизу появилась полоса прокрутки. А также у этих полос прокрутки появились ползунки, и я мог переместиться в любое место в этом блоке second_div. Вот мой код https://jsfiddle.net/ManuOP/aopk3new/8/

Если создать один блок, без вложений, то результат получается тот, который меня устраивает, но мне нужно, чтобы блок с ползунками не выходил за рамки основного блока

Спасибо.

HTML

<div id='main_div'>
<div id="second_div">Hello</div>
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

div {
    display: flex;
}

div#main_div {
    height: 80vh;
    width: 80vw;
    background: red;
    overflow: hidden; 
}


div#second_div {
    height: 10000px;
    width: 10000px;
    background: green;
    overflow: scroll;
}

Answer 1

У тебя overflow: scroll; должен стоять на родителе, а не дочернем элементе, плюс div {display: flex;} нужно убрать. Код будет выглядеть так:

html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

div#main_div {
    height: 80vh;
    width: 80vw;
    background: red;
    overflow: scroll; 
}


div#second_div {
    height: 10000px;
    width: 10000px;
    background: green;
    position: relative;
    
}

И парочка советов:

Не стоит использовать id, лучше классы.
Если обнулять маргины-паддинги, то лучше у всего. То есть, не html html, body { margin: 0; ...}, а * {margin: 0; ...}

БЛОГ НА HUSL

Ползунок прокрутки при overflow scroll. Возможность переместиться по блоку

Ответы (1 шт):