如何在 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 菜单上放置垂直滚动条的主要内容,如果未能解决你的问题,请参考以下文章