We have a Twitter Bootstrap
site that uses a dropdown menu with a height of 500px
. It seems that in WebKit
browsers scrolling with a mouse scroll wheel does not scroll the menu when the mouse is over it, but rather the page. Using Firefox, it performs better, but sometimes scrolls the page when your mouse is over the menu.
Test by viewing the “General Policies” menu item:
http://www.puc.edu/campus-services/student-services/student-handbook
Is there a way to give the menu focus, when your mouse is over it, so that the mouse scroll wheel can scroll the menu rather than the content of the page?
2
Answers
adding
to
.dropdown-menu
allows me to use a scroll wheel on Chrome (webkit browser)You can give overflow-y: auto that will work. But this happening because of z-index value. Change the z-index value of:
And it will work.