在模态框中显示滚动条

Question

我正在使用angular-bootstrap和ionicFramework开发应用程序。 问题出现在angular-bootstrap的$modal元素上。我想在其中添加垂直滚动条，但是在ionic.css中有如下样式：

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

由于这个原因，模态框中没有滚动条。 我尝试用多种方式解决这个问题，但现在我感到困惑。

- Olga Akhmetova

---

为什么不将那一行从 display:none 改成其他的呢？ - alex

@alex 有时候程序员更喜欢不改变框架的基本 CSS，所以他们会在后面编写 CSS 来覆盖框架的 CSS。 - indubitablee

@GraceLee，我没有给你的答案投反对票。 - Olga Akhmetova

为什么不在你的模态框中使用ion-scroll？ - Guillermo Gutiérrez

@Guillermo Gutiérrez 谢谢，它有效！ - Olga Akhmetova

Answer 1

将您的模态HTML组件放置在ion-content内部。

- Jaafar Abbadi

---

这是正确的答案，已接受的选项虽然可行但属于hack。 - TimNode

Answer 2

尝试在您的模态框中使用ion-scroll组件。例如：

<ion-scroll zooming="true" direction="xy" style="width:500px;height:500px">
  <!-- Put your content here -->
</ion-scroll>

参考资料：http://ionicframework.com/docs/api/directive/ionScroll/

该指令允许在提供的元素上创建可滚动容器。您可以使用其输出事件来执行操作，并且还可以使用它来控制滚动行为。要使用此指令，请将ion-scroll属性添加到

，或任何其他元素中。

- Guillermo Gutiérrez