滚动条在jstree中不断向下滚动答案

【问题标题】：scrollbar keeps on scrolling down in jstree滚动条在jstree中不断向下滚动
【发布时间】：2014-09-12 09:28:48
【问题描述】：

在 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
    ...
    ...
    ...
});

【问题讨论】：

不确定您所说的“将鼠标悬停在滚动条上在树内导航”是什么意思。你是如何准确导航的？你在使用滚动条吗？我想知道是否存在不断触发滚动事件的错误...
@Blazes：是的 Blazes。我正在使用滚动条上下滚动。问题是：它只是在扩展节点后不断下降。我想通过单击并按住滚动条将其向上拖动以查看顶部的节点。但是每次我尝试向上拖动它时，它都会继续稳定地向下滚动，直到到达块高度的末端。
首先，我建议检查您的 jstree 版本以确保它是最新的。然后，我建议使用 jstree 的非最小化版本并调试滚动事件 - 它可能会给您一些见解。

【解决方案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/

【讨论】：