为特定组件启用滚动

Question

我已通过在style.scss 中指定代码来禁用滚动浏览我的项目。现在我需要为特定组件的模板启用滚动。但我做不到。

style.scss

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar {
  display: none;
}

以上是禁用项目滚动。

abc.html

<div class="col-sm-4 scroll">
    <div class="card">
</div>

abc.scss

.scroll {
    max-height: 100px!important;
    overflow-y: auto!important;
}

我没有看到上述 (abc.html & abc.scss) 代码的任何滚动。请帮帮我

Answer 1

您已将::-webkit-scrollbar 元素设置为display: none。您需要再次显示它：

.scroll {
    max-height: 100px!important;
    overflow-y: auto!important;
    &::-webkit-scrollbar {
        display: initial;
    }
}