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

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，以及的父级。

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.