滚动条在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/