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

Question

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

我只使行可滚动并且滚动条被隐藏。但我不能让这两列如此。

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

---

之前有人问过一些类似的问题，但没有帮助。

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

如何在响应式网格中创建两个可独立滚动的列？

隐藏滚动条，但仍然可以滚动

更新

这是我们使用的应用程序中的一个小部件。所以，我不能改变body、html和container-fluid父级的样式。

标签： csstwitter-bootstrapbootstrap-4

Answer 1

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

.col {
  overflow: hidden;
}

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

-> 代码笔。