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

Posted

技术标签:

【中文标题】如何在 dijit 菜单上放置垂直滚动条【英文标题】:How to put a vertical scroll bar on a dijit menu 【发布时间】:2011-04-15 12:54:05 【问题描述】:

我想创建一个带有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 属性

【问题讨论】:

【参考方案1】:

这只是向您展示如何检测元素滚动条存在的想法:

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

【讨论】:

以上是关于如何在 dijit 菜单上放置垂直滚动条的主要内容,如果未能解决你的问题,请参考以下文章

如何制作 Bootstrap 下拉菜单的垂直滚动条

如何从 ListView 的右边缘设置垂直滚动条的边距?

如何使用 Plotly 创建垂直滚动条?

如何在 Google Chrome 的表格的 tbody 元素上放置左滚动条?

CSS如何隐藏滚动条?

如何使用 QScrollArea 使滚动条出现