在我的代码中显示垂直滚动条

Question

我正在浏览我的 HTML 文档中的代码，并在插入代码示例的地方遇到了以下代码。这是我指的代码。

 <div class="api-content-item" data-ng-show="verb.code != undefined">
    <h5>Code Samples:</h5>
    <ul class="example-lang">
      <li data-ng-repeat="ex in verb.code">
        <a data-ng-click="exampleCode(ex.uri, $parent.$index)">
          {{ex.lang}}
        </a>
      </li>
    </ul>
    <div class="document-clear"></div>
    <div hljs 
       data-line source="verb.examplecodedata" 
       class="doc-code-example" 
       data-ng-init="exampleCode(verb.code[0].uri, $index)"></div>
 </div>

问题是，代码没有垂直滚动条，而是水平滚动条。例如，如果我有 400 行代码要显示在我的 HTML 文档上，它会占用大量空间并显示所有我不想要的代码。

Angular JS 中有什么东西可以让我在上面的代码中包含垂直滚动条吗？请指教。谢谢

当我使用以下 CSS 时：

.doc-code-example {
    overflow-x: scroll;
    /*max-height:60%;
    overflow-y:scroll;*/
    background: #fff;
    /*overflow: -moz-scrollbars-vertical;*/ 

}

滚动条场景如下所示：:

但是，当我使用以下 CSS 时，

.doc-code-example {
    /*overflow-x: scroll;*/
    max-height:60%;
    overflow-y:scroll;
    background: #fff;
    overflow: -moz-scrollbars-vertical; 

}

滚动条类似于：创建了垂直印象，水平滚动条改变了它的颜色，但仍然存在。我想知道怎么了？

Answer 1

这是一个简单的 CSS 问题。

在您的类 .api-content 项目中，设置一个最大高度，例如

 max-height:60%;

并将你的溢出-y设置为滚动

 overflow-y: scroll;
 overflow-x:hidden;

应该这样做。如果您在 html 而不是 div 中添加这些行，则垂直滚动将应用到任何地方，而不仅仅是特定的 div。

添加

 overflow: -moz-scrollbars-vertical; 

FF 支持