Javascript 当光标位于其前面的绝对元素上时，能够在基础元素内滚动

当鼠标光标悬停在

上时，我如何能够滚动
文章
。标题

，同时仍然可以单击

。标题

？如果我将

z-index:-1

设置为

.header

我可以在光标位于

.header

上时滚动，但它不再可单击

HTML:

<div class="row">
  <div class="off-canvas-wrap">
      <div class="inner-wrap">
          <div class="header">
              I should be clickable
          </div>

          <article class="small-12 columns">
              <div style="height:5000px">
              </div>
          </article>

      </div>
  </div>
</div>

article {
    overflow-y: auto;
}
article,
body,
html,
.off-canvas-wrap, 
.off-canvas-wrap .inner-wrap,
.row {
    height: 100%;
    width: 100%;
}
.header {
    position: absolute;
    width: 400px;
    height: 400px;
    background: #000;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -200px;
    z-index: 1;
    color: #fff;
    text-align: center;
    padding-top: 1em;
}

---

如果您想要CSS解决方案，则没有-这是因为鼠标事件与指向指针/光标的项目的可见性直接相关：例如，如果您将

.header

放在后面，使其无法访问（因此可以触发

文章

上的滚动事件），则不会注册单击事件，也是

基于JS的解决方案是监听

mouseweel（）

事件（使用，也可用），然后手动触发

article

元素上的滚动。但是，这不会复制单个操作系统上的默认滚动行为，并且在平滑滚动事件的操作系统（如OSX）上可能会出现波动

不言而喻：

// Cache article's position from top (might change if the page is loaded with a hash, so we cannot declare it as 0)
var fromTop = $('article').scrollTop();

$('.header').mousewheel(function(e,d) {
    // Prevent default scrolling behavior, even when .header is overflowing
    e.preventDefault();

    // Trigger scroll in window
    // You can change how much to amplify the 'd', which is the delta (distance registered from the scrollwheel). I have chosen it to multiply it by 10
    fromTop = fromTop - d*10;
    $(this).next('article').scrollTop(fromTop);
}).click(function() {
    // Just testing
    alert('Header is clicked on!');
});

以下是概念验证JSFIDLE：

---

警告：如果在同一页面上有多个

。header

元素针对多个

文章

元素，您将必须遍历每个

。header

-

文章

对，并分别为每对缓存

fromTop

。

据我所知，不可能，因为这就是鼠标/滚动事件的处理方式。然而，我可能会想到一个基于JS的解决方案，尽管它非常复杂复杂。在eventhandler函数中收听

mousewheel

并滚动

article

。