2011-04-15 45 views
5

我想创建一个带有vertical滚动条的dijit菜单。如何在dijit菜单上放置垂直滚动条

我试着这样做:

pMenu = new dijit.Menu({ 
      templateString: '<div style="height: 75px; overflow-y: auto; overflow-x:hidden">' + dojo.cache("dijit", "templates/Menu.html") + '</div>' 
     }); 

当我这样做,垂直滚动条出现,但宽度是小的(它没有扩大到占滚动条的宽度)。

有没有更好的方法来做到这一点?我基本上是想在dijit.menu

回答

0

这是一个maxHeight属性只是一个想法,告诉你如何能检测元素滚动条存在:

<html> 
    <head> 
     <title>Detect Scrollbars Presence</title> 
     <script type="text/javascript"> 
      function verticalScrollBarExists(id) 
      { 
       var element = document.getElementById(id); 
       oldScrollTop = element.scrollTop; 
       element.scrollTop = 1; 
       if (element.scrollTop > 0) 
       { 
        element.scrollTop = oldScrollTop; 
        document.getElementById('scrollStatus').innerHTML = 'scroll bar visible'; 

        // increase element width 
        element.style.width = '310px'; 
       } 
       else 
       { 
        document.getElementById('scrollStatus').innerHTML = 'scroll bar not visible'; 

        // restore element width 
        element.style.width = '300px'; 
       } 
      } 

      function add() 
      { 
       var element = document.getElementById('testElement'); 
       element.innerHTML = element.innerHTML + ' Stuff'; 
      } 

      function remove() 
      { 
       var element = document.getElementById('testElement'); 
       element.innerHTML = element.innerHTML.substring(0, element.innerHTML.length - 6); 
      } 

      window.onload = function() 
      { 
       setInterval('verticalScrollBarExists("testElement")', 500); 
      }; 
     </script> 
     <style type="text/css"> 
      #testElement 
      { 
       width: 300px; 
       height: 40px; 
       background-color: blue; 
       color: white; 
       overflow: auto; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="testElement">Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff</div> 
     <div id="scrollStatus">Uninitialised</div> 
     <input type="button" onclick="add()" value="Add" /> 
     <input type="button" onclick="remove()" value="Remove" /> 
    </body> 
</html>