悬停固定元素时滚动不起作用

Question

简而言之，我有一个带有两个标签的站点，一个固定在屏幕左侧，一个固定在屏幕右侧。当您不悬停它们时，您可以像往常一样滚动，但是当您将鼠标悬停在它们上方时，您将无法再滚动，直到您将鼠标移出它们。

该网站是 - http://www.kuhlswaine.com

这是我指的两个标签及其 CSS -

CSS 和 HTML

    #hover-zone-left {
      background-color: transparent;
      height: 100%;
      left: 0;
      position: fixed;
      top: 0;
      width: 10%;
      z-index: 9;
    }
    #hover-zone-right {
      background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
      height: 100%;
      position: fixed;
      right: 16px;
      top: 0;
      width: 10%;
      z-index: 99999;
    }

<a id="hover-zone-left" class="prev-button special-anchor hover-zone" href="#"></a>
<a id="hover-zone-right" class="next-button special-anchor hover-zone" href="#"></a>