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

时间:2018-02-21 09:39:41

标签: javascript html jqxwidgets

当我在jqxTree中折叠或展开节点时,容器元素的滚动条将显示在顶部。

是否可以避免这种行为?

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

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

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

HTML:

NaN

JavaScript的:

$( '#jqxTree')。jqxTree({        主题:'energyblue'    });

CSS:

<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>

1 个答案:

答案 0 :(得分:0)

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

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