javascript - 为没有滚动功能的dom元素创建滚动条？

Question

我正在尝试创建一个格式化的 json-html 输出。
为此，我正在使用此插件
https://www.npmjs.com/package/jquery.json-viewer
demo：https
://rawgit.com/abodelot/jquery.json-viewer/master/demo.html 它正在工作很好，但如果我向我的 JSON 添加一些对象，可以说我改变了：

"topping": [
    { "id": 5001, "type": "None" },
    { "id": 5002, "type": "Glazed" },
    { "id": 5005, "type": "Sugar" },
    { "id": 5003, "type": "Chocolate" },
    { "id": 5004, "type": "Maple" }
  ]

像这样：

"topping": [
    { "id": 5001, "type": "None" },
    { "id": 5002, "type": "Glazed" },
    { "id": 5005, "type": "Sugar" },
    { "id": 5003, "type": "Chocolate" },
    { "id": 5004, "type": "Maple" },
    { "id": 5004, "type": "Maple" },
    { "id": 5004, "type": "Maple" },
    { "id": 5004, "type": "Maple" },
    { "id": 5004, "type": "Maple" },
    { "id": 5004, "type": "Maple" },
    { "id": 5004, "type": "Maple" }
  ]

输出的高度发生变化。
所以，基本上只是增加输出，整个输出高度都会改变。但是我想要一个“固定”的高度并添加一个滚动条，如果输出对于高度来说太大了。
我将如何实现这一目标？

编辑：
我的程序示例：
html div：

<div id="result"></div>

CSS：

output {
      min-height: 100px;
      max-height:100px;
      resize: none;
      overflow-y: scroll;
    }

JS：（在那里设置一些css设置，因为可以有另一种输出）

function doStuff(outputVal) {
        var temp = JSON.parse(outputVal);
        $("#result").append('<pre id="output"></pre>');
        $('#output').css('background-color','white');
        $('#output').css('width','99.3%');
        $('#output').jsonViewer(temp);
}

基本上，我在某处有一个按钮，它使用 JSON 字符串调用“doStuff”函数，解析 JSON 字符串并创建一个 dom 元素，并且我使用我之前链接的插件来创建格式化的 JSON 输出，如示例中所示。如果我给出一个适合 100px 高度框（实际上只有 1 个元素）的 JSON 字符串，那么一切看起来都很好，但是如果我给出一个长字符串，框的高度会增加，或者文本会超出框（https://imgur. com/AisQK6e <- 就像这里一样，它有点小，但如果你仔细观察，你会看到输出框上有一些括号）。
基本上我想使用那个插件让我们说在一个带有滚动条的 100px 高度框中输出一个 500 个元素的对象作为 JSON。
抱歉我的语法错误或解释不好，希望它仍然可以以某种方式理解。

这里还有使用
https://github.com/abodelot/jquery.json-viewer/tree/master/json-viewer的插件的源代码

我还尝试将我的问题总结为一张图片，也许它会有所帮助。 https://i.imgur.com/mbOtYb6.png

标签： javascriptjqueryhtmlcss