如何制作两个独立的可滚动列？

Question

我有一个包含两个columns的模态。我正在尝试使列彼此独立地可滚动。重要的是我希望隐藏刻度滚动条。

我仅使该行可滚动，并且滚动条被隐藏。但是我不能使这两栏都这样。

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

---

之前也曾提出过一些类似的问题，但并没有帮助。

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

更新

这是我们使用的应用程序中的小部件。因此，我无法更改 body ， html 和 container-fluid 的父项的样式。

Answer 1

我相信以下方法可以解决您的问题。使用overflow: hidden的技巧来隐藏滚动条，而使用padding的来隐藏滚动条。

.col {
  overflow: hidden;
}

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

-> Codepen.