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

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

• javascript
• jquery
• html
• css
• jstree

• Not sure what you mean by "navigate within the tree with the mouse over the scrollbar". How are you navigating exactly? Are you using the scrollbar? I'm wondering if there's a bug that keeps triggering a scroll event... – Blazes Commented Sep 12, 2014 at 9:39
• @Blazes: Yes Blazes. I am using the scrollbar to scroll up and down. The problem is: it just steadily keeps on ing down after expanding the node. I wanted to drag it up to see the nodes on the top by clicking and holding the scrollbar. But every time I try to drag it up it just keeps on steadily scrolling down until it reaches the end of the block height. – raikumardipak Commented Sep 12, 2014 at 10:14
• First, I'd suggest checking your version of jstree to make sure it's the latest. Then, I'd suggest using the non-minimised version of the jstree and debugging the scroll event - it might give you some insight. – Blazes Commented Sep 12, 2014 at 10:41

1 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./optimizing-critical-rendering-path/