search

googlearchive / paper-dropdown-menu

A UI control to choose an option from a drop-down menu, similar to a <select>
23 stars 21 forks source link

Window scroll bar disappearing. #67

Open ermish opened 9 years ago

ermish commented 9 years ago

When opening a dropdown, the window scrollbar is disappearing.

The paper-dropdown-menu demo shows the issue.

solomongracio commented 9 years ago

+1

dhineshdhanapal commented 9 years ago

+1

SamMaier commented 8 years ago

Can reproduce here: http://jsbin.com/qukawalura/edit?html,output - however demo no longer shows the issue.

ianbitts commented 8 years ago

I was able to create a hacky work-around that suits my needs. Perhaps it will help other as well.

In your css...

body {
     overflow: auto !important;
}
body.noscroll {
       position: fixed;
       overflow-y: scroll !important;
       width: 100%;
}

In your app.js...

window.addEventListener('paper-dropdown-open', function () {
      var body = document.querySelector('body');
      // If the window's scroll bar would be visible, add the noscroll class.
      if (body.scrollHeight > body.clientHeight) {
          body.classList.add('noscroll');
      }
  });
  window.addEventListener('paper-dropdown-close', function () {
      document.querySelector('body').classList.remove('noscroll');
  });

Essentially, the css prevents Polymer from hiding the scroll bars when the dropdown is opened. The javascript and .noscroll class prevent the screen from being scrolled when the dropdown is open, but keep the scrollbar visible.