Как сделать скролл в div рабочим?

Question

[gh0sty]

Сразу говорю, я не фротендер, но все же.
У меня есть приблизительно такой код (Надеюсь, Bootstrap всем понятен):

<div style="margin-top: 52px">
	<div class="d-flex justify-content-between bg-white mx-1 overflow-hidden" style="height: calc(100vh - 52px)">
		<div class="d-inline-block h-100 position-relative" style="width: calc(100% - 300px)">
			<div id="dialog-{{ dialog_data.dialog.id }}" class="dialog-content w-100" style="overflow-y: scroll">
				<div style="padding: 3rem 1rem !important;">
				<!-- Some data with long height -->
				</div>
			</div>
		</div>
	</div>
</div>

.dialog-content {
    margin-top: calc(30px + 2rem);
    margin-bottom: calc(40px + 2rem);
    height: calc(100% - 70px - 4rem);
}

И я уже который час не могу выяснить, почему скролл при движении колесика - не работает, а при нажатии на колесо и движении, или передвижении ползунка - все ок.
Мб, ошибка где-то очень тупая, т.к. сна сегодня не было)
Заранее благодарен.

Comments

[Ankhena]

Сделайте песочницу с видимой проблемой.

[gh0sty]

Ankhena, звучит как чертова магия, но в песочнице работает.

[gh0sty]

gh0sty, окей, в чем может быть тогда рофл?

Answer 1

[gh0sty]

Окей. Покапался, поудивлялся что в пенах работает, понял что проблема в плагине для смены скролла.
Всем пасибки!

Comments

[gh0sty]

Не дестроил привязку скролла к body, лежал в другом темплейте (этот в него вложен).

Answer 2

[Роман Дворянов]

Во второй строчке у вас есть класс overflow-hidden, судя по названию этот класс скрывает весь лишний контент и скролл, но можно таскать колёсиком

<div class="d-flex justify-content-between bg-white mx-1 overflow-hidden" style="height: calc(100vh - 52px)">

Замените на следующий код

<div class="d-flex justify-content-between bg-white mx-1" style="height: calc(100vh - 52px); overflow-y: auto;">