skip to Main Content

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

enter image description here

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


  1. adding

    overflow-y: auto;
    

    to .dropdown-menu allows me to use a scroll wheel on Chrome (webkit browser)

    Login or Signup to reply.
  2. You can give overflow-y: auto that will work. But this happening because of z-index value. Change the z-index value of:

    nav .dropdown-menu {
      z-index: 99999;
    } 
    

    And it will work.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search