scrollbar keeps on scrolling down in jstree

Question

I have a set of data being displayed as a tree by the help of jstree plugin and jquery.

The data shows up perfectly in the tree structure. On expanding the last node in the tree the scrollbar appears on the right side of the div block.

Problem: However if I navigate within the tree with the mouse over the scrollbar, the scrollbar keeps on scrolling down and does not go up.

I am at wits end what could the reason be. I am using a Mozilla Firefox browser.

Please help.

Sample Code below:

css:

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

.jsp:

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

.js:

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

Answer 1

• How to Solve

You just have to create another div, before the div where you instantiate the jstree, and add the class="myScrollableBlock" at the outer div. Like this:

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

• Explanation

When you dinamically create the jstree, calling the jquery function

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

It overlaps any the static css style specified before (class="myScrollableBlock" in your case).

You can make a quick check this way:

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

Why CSS is overlapped by JS?

When loading an HTML file, the browser executes the JS scripts after the DOM and the CSS files are built. Overlapping anything that has been done before. Image source: https://www.sitepoint.com/optimizing-critical-rendering-path/