How To Enable Scrolling Over Fixed Element?

I have a problem with scrolling over fixed element, it doesn't work on my site. But I saw that there is no such problem in some scrolling examples like this one. After a while I fo

Solution 1:

Let's boil your trouble down to this: if the mouse is over #inner, you can't use the usual methods (spacebar, arrow keys, trackpad, wheel) to scroll #outer up and down.

If you need to keep everything you have, get around this by adding pointer-events: none to the inner element. (Note that this means you won't be able to interact with it at all - so any links in the inner element won't be clickable. Given the examples you gave in your question, that won't be a problem.)

html,
body {
  height: 100%;
  margin: 0;
}
html {
  overflow: hidden;
}
#inner {
  position: fixed;
  background: red;
  width: 200px;
  height: 200px;
  pointer-events: none; /* this is your fix. note it doesn't work in IE < 9 */
}
#outer {
  overflow-y: auto; /* I changed this from "scroll". that may have been an inappropriate change, but it seems like it's probably desirable - you don't want the scrollbar to show even if the window is tall enough that you can't scroll */
  background: blue;
  height: 100%;
}
#push {
  height: 2000px;
}

<div id="outer">

  <p>top of #outer</p>

  <div id="inner">
    #inner
  </div>

  <div id="push" />
</div>

If you can get away with changing your html's styles, you can work around this by dropping the html {height: 100%; overflow: hidden}. This solution doesn't use pointer-events: none so you'll still be able to interact with the inner element!

html {
  margin: 0; /* dropped html {height: 100%; overflow: hidden} */
}
body {
  height: 100%;
  margin: 0;
}
#inner {
  position: fixed;
  background: red;
  width: 200px;
  height: 200px;
}
#outer {
  overflow-y: auto; /* I changed this from "scroll". that may have been an inappropriate change, but it seems like it's probably desirable - you don't want the scrollbar to show even if the window is tall enough that you can't scroll */
  background: blue;
  height: 100%;
}
#push {
  height: 2000px;
}

<div id="outer">

  <p>top of #outer</p>

  <div id="inner">
    #inner
  </div>

  <div id="push"></div>
</div>