[英]How to put a vertical scroll bar on a dijit menu
我想创建一个具有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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.