Question

我正在尝试创建format-json-html输出要实现这一点，我正在使用这个插件
https://www.npmjs.com/package/jquery.json-viewer
演示：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-String调用“doStuff”函数，JSON字符串得到解析，dom元素被创建，我使用我之前链接的插件创建一个格式化的JSON输出，如这个例子。如果我给出一个适合100px高度框的JSON字符串（字面上只有1个元素），一切看起来都很好但是如果我给一个长字符串，框高度会增加或文本将超出框（https://imgur.com/AisQK6e＆lt ; - 就像在这里，它有点小，但如果你仔细观察，你会看到一些括号越过输出框）基本上我想使用该插件，让我们在带有滚动条的100px高度框中输出500个元素对象作为JSON。
抱歉我的语法不好或解释不好，希望它仍然可以理解。

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

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

为dom元素创建滚动条而不使用滚动功能？

0 个答案: