Question

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 found a little difference - on my site the scrolling of the page is not on the html tag but on the of app's root tag.

Here you can find an example of the situation that I have - you can't scroll over the red block http://jsbin.com/rutogosesa/edit?html,css,output, and here an example where you can scroll over the red block http://jsbin.com/munixamuqo/edit?html,css,output.

My quesion is: how to allow scrolling in first example. I know that I can subscribe on onwheel event and move scrollbar mannually, but it looks weird as all browsers have smooth scrolling my implementation will broke its behaviour, especially for mac users. Maybe there are some other possible solutions?

Answer 1

让我们解决这个问题：如果鼠标超过#inner，则无法使用常用方法（空格键，箭头键，触控板，滚轮）滚动{{ 1}}上下。

如果您需要保留所有内容，请通过向内部元素添加#outer来解决此问题。（请注意，这意味着您根本无法与之互动 - 因此内部元素中的任何链接都不会被点击。根据您在问题中提供的示例，这不会导致是个问题。）

＆＃13;

pointer-events: none

＆＃13;

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;
}

＆＃13;

如果您可以更改<div id="outer"> <p>top of #outer</p> <div id="inner"> #inner </div> <div id="push" /> </div>的样式，可以通过删除html来解决此问题。此解决方案不使用html {height: 100%; overflow: hidden}，因此您仍然可以与内部元素进行交互！

＆＃13;

pointer-events: none

＆＃13;

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;
}

＆＃13;

How to enable scrolling over fixed element?

1 个答案: