滚动条在jstree中继续向下滚动

Question

我有一组数据在jstree插件和jquery的帮助下显示为树。

数据在树形结构中完美显示。在展开树中的最后一个节点时，滚动条出现在div块的右侧。

问题： 但是，如果我使用鼠标在滚动条上导航树中，滚动条会继续向下滚动而不会上升。

我在智慧结束可能是什么原因。我使用的是Mozilla Firefox浏览器。

请帮忙。

以下示例代码：

的CSS：

.myScrollableBlock {
  display: block;
  height: 170px;
  overflow: auto;
}

的.jsp：

<div id="myTreeDiv" class="myScrollableBlock">
</div>

的.js：

$('div#myTreeDiv').jstree({
// jsTree plugins
    ...
    ...
    ...
});

Answer 1

• 如何解决

你只需要在实例化jstree的div之前创建另一个div，并在外部div添加class =“myScrollableBlock”。像这样：

<div class="myScrollableBlock">
    <div id="myTreeDiv"></div>
</div>

• 的说明

当您在动态创建jstree时，调用jquery函数

$('div#myTreeDiv').jstree({...});

它重叠了之前指定的任何静态css样式（在您的情况下为class="myScrollableBlock"）。

你可以这样快速检查：

<div style="padding: 20px 20px; overflow: auto; height:170px;">
    <div id="myTreeDiv"></div>
</div>

为什么CSS与JS重叠？

加载HTML文件时，浏览器会在构建DOM和CSS文件后执行JS脚本。重叠以前做过的任何事情。 图片来源：https://www.sitepoint.com/optimizing-critical-rendering-path/