>我在extjs6中有一个滚动菜单,具有默认设置,项目列表顶部和底部的向上/向下按钮可以滚动它。在Chrome和IE中,我也可以使用鼠标滚轮滚动它。
问题是在Firefox中鼠标滚轮滚动不起作用,我可以使用两个按钮滚动菜单。
我在Sencha Fiddle(https://fiddle.sencha.com/#fiddle/1748)中做了一些测试,我发现如果我使用extjs4,鼠标滚轮在所有浏览器中都可以正常工作,但它在使用extjs6的Firefox中不起作用。
在 Firefox 中也有实现此功能的解决方法吗?我知道Firefox正在使用"DOMMouseScroll"事件而不是"鼠标滚轮"事件,我试图将此侦听器添加到菜单中,但它不起作用。
如果可能的话,我更喜欢使用标准菜单滚动而不是滚动条。
将可滚动属性添加到您的菜单中 火狐浏览器上也修复了问题:
Ext.application({
name: 'Fiddle',
launch: function() {
var scrollMenu = Ext.create('Ext.menu.Menu', {
height: 100,
scrollable:{
x:false,
y:true
}
});
for (var i = 0; i < 50; ++i) {
scrollMenu.add({
text: 'Item ' + (i + 1)
});
};
Ext.create('Ext.panel.Panel', {
width: 500,
height: 500,
items: [{
xtype: 'toolbar',
width: '100%',
height: 40,
items: [{
text: 'Scrolling Menu',
menu: scrollMenu
}]
}],
renderTo: Ext.getBody()
});
}
});
如果您只想在 Firefox 上解决问题,您可以设置此属性,控制使用的浏览器是否是 Firefox
:if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1)
{
//Do Firefox-related activities
scrollMenu.setConfig('scrollable',{
x:false,
y:true
});
}
在之前的渲染中执行此操作。
没有滚动条就无法让它在火狐上工作。