html - 滚动条不适用于鼠标滚轮且样式不正确

Question

我对带有内部容器的滚动条有问题。主要问题是滚动鼠标滚轮仅滚动外部滚动条，而我希望内部滚动条在我悬停时滚动，以及为什么滚动条的样式不同（至少在 Chrome 中，在 Firefox 中它显示正常）？我不确定发生了什么，但我认为它是由 CSS 引起的。我使用 Bootstrap 框架（BS3 和 BS4 都显示了问题）并且行容器具有以下 CSS

{
    position: absolute;
    width: 100%;
    overflow: auto;
    border: 1px solid #c0c0c0;
    background-color: #f7f7f7;
    padding: 0;
    z-index: 1000;
    vertical-align: middle;
    display: block;
}

您可以从下面的打印屏幕中看到滚动条的样式不同（至少在 Chrome 中没有顶部/底部箭头），我不知道为什么并且我没有对滚动条应用任何样式。

这里有一个现场演示Angular-Slickgrid - Row Detail，单击“+”图标打开任何行详细信息容器。另请注意，我是Angular-Slickgrid（它是 SlickGrid 的包装库）的作者，它是数百人使用的库。

但是请注意，相同的演示适用于SlickGrid - Row Detail，它基本上是相同的演示，但在纯 html/css 中，它使用 jQueryUI 而不是 Bootstrap。

实际上可能是 Angular 取消了滚动，我看到了这个鼠标滚轮事件处理程序，如果我删除它，它就可以工作

标签： htmlcssangularbootstrap-4slickgrid