如何在垂直菜单上放置垂直滚动条

如何解决如何在垂直菜单上放置垂直滚动条

| 我想创建一个带有vertical滚动条的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上的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>