如何启用滚动固定元素? [英] How to enable scrolling over fixed element?

问题描述

我在滚动固定元素时遇到问题，它在我的网站上不起作用.但是我看到在某些滚动示例(如此)中没有这样的问题.一段时间后，我发现有一点不同-在我的网站上，页面的滚动不是在html标记上，而是在应用程序的根标记上.

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.

在这里您可以找到我所遇到的情况的一个示例-您无法在红色方块上滚动 http://jsbin.com/rutogosesa/edit?html,css,output ，这里是一个示例，您可以在红色块上滚动

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.

我的问题是:在第一个示例中如何允许滚动.我知道我可以订阅onwheel事件并手动移动滚动条，但是看起来很奇怪，因为所有浏览器都可以平滑滚动，我的实现会破坏其行为，尤其是对于mac用户.也许还有其他可能的解决方案?

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?

推荐答案

让我们把麻烦归结为这一点:如果鼠标悬停在#inner上，则无法使用常用方法(空格键，箭头键，触控板，滚轮)来上下滚动#outer.

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.

如果需要保留所有内容，请在内部元素中添加pointer-events: none来解决此问题. (请注意，这意味着您将根本无法与之交互-因此，内部元素中的任何链接都将无法单击.考虑到您在问题中给出的示例，那将不是问题.)

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>

如果您可以更改html的样式，则可以通过删除html {height: 100%; overflow: hidden}来解决此问题.此解决方案不使用pointer-events: none，因此您仍然可以与内部元素进行交互！

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>

这篇关于如何启用滚动固定元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！