CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
mahan
mahan

Reputation: 14925

How to make two independent scrollable columns?

I have a modal that contains two columns. I am trying to make the columns scrollable independent of each other. The important thing is that I want the tick scrollbar be hidden.

I have only made the row scrollable and the scrollbar is hidden. But I can't make the two columns be so.

https://codepen.io/anon/pen/bKxodX

There are a few similar questions have been asked before, but they did not help.

How can i make 3 independently scrollable columns

How to create two independently-scrollable columns in a responsive grid?

Hide scroll bar, but while still being able to scroll

Update

This is a widget in an App that we use. So, I am can not change style of body, html, and the parent of container-fluid.

Upvotes: 1

Views: 6835

Answers (1)

Andrzej Ziółek
Andrzej Ziółek

Reputation: 2319

I believe below approach solves your issue. Scrollbars are hidden using trick with overflow: hidden and hiding scrollbar with padding.

.col {
  overflow: hidden;
}

.col-inner {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  padding-right: 30px;
  box-sizing: content-box;
}

-> Codepen.

Upvotes: 3

Related Questions