jqxTree 通过折叠/展开节点滚动到顶部

Question

当我折叠或展开 jqxTree 中的节点时，容器元素的滚动条将移至顶部。

是否可以避免这种行为？

为小部件设置固定高度的解决方案对我不利。我需要动态高度。只有当我有一个带有滚动条的容器 div 时才有可能。

http://jsfiddle.net/ccegq/633/

要重现问题，请打开小提琴向下滚动并折叠/展开任何节点。

html:

<div id='div1'>
  <div id='jqxTree'>
      <ul>
          <li item-selected='true'>Home</li>
          <li item-expanded='true'>Solutions
              <ul>
                  <li>Education</li>
                  <li>Financial services</li>
                  <li>Government</li>
                  <li>Manufacturing</li>
                  <li>Solutions
                      <ul>
                          <li>Consumer photo and video</li>
                          <li>Mobile</li>
                          <li>Rich Internet applications</li>
                          <li>Technical communication</li>
                          <li>Training and eLearning</li>
                          <li>Web conferencing</li>
                      </ul>
                  </li>
                  <li>All industries and solutions</li>
              </ul>
          </li>
          <li item-expanded='true'>Solutions
              <ul>
                  <li>Education</li>
                  <li>Financial services</li>
                  <li>Government</li>
                  <li>Manufacturing</li>
                  <li>Solutions
                      <ul>
                          <li>Consumer photo and video</li>
                          <li>Mobile</li>
                          <li>Rich Internet applications</li>
                          <li>Technical communication</li>
                          <li>Training and eLearning</li>
                          <li>Web conferencing</li>
                      </ul>
                  </li>
                  <li>All industries and solutions</li>
              </ul>
          </li>
          <li item-expanded='true'>Solutions
              <ul>
                  <li>Education</li>
                  <li>Financial services</li>
                  <li>Government</li>
                  <li>Manufacturing</li>
                  <li>Solutions
                      <ul>
                          <li>Consumer photo and video</li>
                          <li>Mobile</li>
                          <li>Rich Internet applications</li>
                          <li>Technical communication</li>
                          <li>Training and eLearning</li>
                          <li>Web conferencing</li>
                      </ul>
                  </li>
                  <li>All industries and solutions</li>
              </ul>
          </li>
          <li item-expanded='true'>Solutions
              <ul>
                  <li>Education</li>
                  <li>Financial services</li>
                  <li>Government</li>
                  <li>Manufacturing</li>
                  <li>Solutions
                      <ul>
                          <li>Consumer photo and video</li>
                          <li>Mobile</li>
                          <li>Rich Internet applications</li>
                          <li>Technical communication</li>
                          <li>Training and eLearning</li>
                          <li>Web conferencing</li>
                      </ul>
                  </li>
                  <li>All industries and solutions</li>
              </ul>
          </li>
          <li item-expanded='true'>Solutions
              <ul>
                  <li>Education</li>
                  <li>Financial services</li>
                  <li>Government</li>
                  <li>Manufacturing</li>
                  <li>Solutions
                      <ul>
                          <li>Consumer photo and video</li>
                          <li>Mobile</li>
                          <li>Rich Internet applications</li>
                          <li>Technical communication</li>
                          <li>Training and eLearning</li>
                          <li>Web conferencing</li>
                      </ul>
                  </li>
                  <li>All industries and solutions</li>
              </ul>
          </li>
          <li item-expanded='true'>Solutions
              <ul>
                  <li>Education</li>
                  <li>Financial services</li>
                  <li>Government</li>
                  <li>Manufacturing</li>
                  <li>Solutions
                      <ul>
                          <li>Consumer photo and video</li>
                          <li>Mobile</li>
                          <li>Rich Internet applications</li>
                          <li>Technical communication</li>
                          <li>Training and eLearning</li>
                          <li>Web conferencing</li>
                      </ul>
                  </li>
                  <li>All industries and solutions</li>
              </ul>
          </li>
          <li item-expanded='true'>Solutions
              <ul>
                  <li>Education</li>
                  <li>Financial services</li>
                  <li>Government</li>
                  <li>Manufacturing</li>
                  <li>Solutions
                      <ul>
                          <li>Consumer photo and video</li>
                          <li>Mobile</li>
                          <li>Rich Internet applications</li>
                          <li>Technical communication</li>
                          <li>Training and eLearning</li>
                          <li>Web conferencing</li>
                      </ul>
                  </li>
                  <li>All industries and solutions</li>
              </ul>
          </li>
      </ul>
  </div>
</div>

JavaScript：

$('#jqxTree').jqxTree({ 主题：“能量蓝” });

CSS：

#div1 {
  overflow-y: scroll;
  height: 300px;
  max-height: 300px;
}

Answer 1

 $('#jqxTree').jqxTree({
       theme: 'energyblue',
       height:300
   });

为树设置一个高度。这将解决您的问题。 您看到的卷轴不是来自 jqxTree。希望对您有所帮助。