IE11上的滚动滚动问题

时间:2019-04-25 10:28:53

标签: html css internet-explorer overflow css-position

我有两个ID选择器(顶部,底部)。在顶部,我设置了“ position:relative”,在底部,设置了固定位置,并将其放置在“ top” div上。 “ overflow:auto”设置为“底部” div。

当我滚动“底部” div内的内容时,“顶部” div内的内容也在IE浏览器中滚动。

我需要知道的是,当我滚动底部内容(位置:固定)时,只有它可以工作。顶部div中的内容不应滚动。

div#top {
  width: 90%;
  margin: auto;
  height: 900px;
  background: #f5e3ce;
  position: relative;
  z-index: -1
}

div#bottom {
  width: 90%;
  height: 50vh;
  margin: auto;
  position: fixed;
  background: darkgrey;
  bottom: 0;
  overflow: auto;
  z-index: 4;
  left: 75px;
}
<div id="top">
  <div class="content">
    <p>
      *Adempas is approved to treat adults with: Chronic thromboembolic pulmonary hypertension (CTEPH) (WHO Group 4) treated with surgery but who continue to have high pulmonary blood pressure (persistent) or it comes back after surgery (recurrent), or that
      cannot be treated with surgery (inoperable) Pulmonary arterial hypertension (PAH) (WHO Group 1) The Adempas clinical studies included mostly patients with WHO functional class II-III symptoms. It is not known if Adempas is safe and effective in
      children.
    </p>
    <p>
      *Adempas is approved to treat adults with: Chronic thromboembolic pulmonary hypertension (CTEPH) (WHO Group 4) treated with surgery but who continue to have high pulmonary blood pressure (persistent) or it comes back after surgery (recurrent), or that
      cannot be treated with surgery (inoperable) Pulmonary arterial hypertension (PAH) (WHO Group 1) The Adempas clinical studies included mostly patients with WHO functional class II-III symptoms. It is not known if Adempas is safe and effective in
      children.
    </p>
    <p>
      *Adempas is approved to treat adults with: Chronic thromboembolic pulmonary hypertension (CTEPH) (WHO Group 4) treated with surgery but who continue to have high pulmonary blood pressure (persistent) or it comes back after surgery (recurrent), or that
      cannot be treated with surgery (inoperable) Pulmonary arterial hypertension (PAH) (WHO Group 1) The Adempas clinical studies included mostly patients with WHO functional class II-III symptoms. It is not known if Adempas is safe and effective in
      children.
    </p>
  </div>
</div>
<div id="bottom">
  <div class="content">
    <p>
      *Adempas is approved to treat adults with: Chronic thromboembolic pulmonary hypertension (CTEPH) (WHO Group 4) treated with surgery but who continue to have high pulmonary blood pressure (persistent) or it comes back after surgery (recurrent), or that
      cannot be treated with surgery (inoperable) Pulmonary arterial hypertension (PAH) (WHO Group 1) The Adempas clinical studies included mostly patients with WHO functional class II-III symptoms. It is not known if Adempas is safe and effective in
      children.
    </p>
    <p>
      *Adempas is approved to treat adults with: Chronic thromboembolic pulmonary hypertension (CTEPH) (WHO Group 4) treated with surgery but who continue to have high pulmonary blood pressure (persistent) or it comes back after surgery (recurrent), or that
      cannot be treated with surgery (inoperable) Pulmonary arterial hypertension (PAH) (WHO Group 1) The Adempas clinical studies included mostly patients with WHO functional class II-III symptoms. It is not known if Adempas is safe and effective in
      children.
    </p>
    <p>
      *Adempas is approved to treat adults with: Chronic thromboembolic pulmonary hypertension (CTEPH) (WHO Group 4) treated with surgery but who continue to have high pulmonary blood pressure (persistent) or it comes back after surgery (recurrent), or that
      cannot be treated with surgery (inoperable) Pulmonary arterial hypertension (PAH) (WHO Group 1) The Adempas clinical studies included mostly patients with WHO functional class II-III symptoms. It is not known if Adempas is safe and effective in
      children.
    </p>
    <p>
      *Adempas is approved to treat adults with: Chronic thromboembolic pulmonary hypertension (CTEPH) (WHO Group 4) treated with surgery but who continue to have high pulmonary blood pressure (persistent) or it comes back after surgery (recurrent), or that
      cannot be treated with surgery (inoperable) Pulmonary arterial hypertension (PAH) (WHO Group 1) The Adempas clinical studies included mostly patients with WHO functional class II-III symptoms. It is not known if Adempas is safe and effective in
      children.
    </p>
    <p>
      *Adempas is approved to treat adults with: Chronic thromboembolic pulmonary hypertension (CTEPH) (WHO Group 4) treated with surgery but who continue to have high pulmonary blood pressure (persistent) or it comes back after surgery (recurrent), or that
      cannot be treated with surgery (inoperable) Pulmonary arterial hypertension (PAH) (WHO Group 1) The Adempas clinical studies included mostly patients with WHO functional class II-III symptoms. It is not known if Adempas is safe and effective in
      children.
    </p>
    <p>
      *Adempas is approved to treat adults with: Chronic thromboembolic pulmonary hypertension (CTEPH) (WHO Group 4) treated with surgery but who continue to have high pulmonary blood pressure (persistent) or it comes back after surgery (recurrent), or that
      cannot be treated with surgery (inoperable) Pulmonary arterial hypertension (PAH) (WHO Group 1) The Adempas clinical studies included mostly patients with WHO functional class II-III symptoms. It is not known if Adempas is safe and effective in
      children.
    </p>
    <p>
      *Adempas is approved to treat adults with: Chronic thromboembolic pulmonary hypertension (CTEPH) (WHO Group 4) treated with surgery but who continue to have high pulmonary blood pressure (persistent) or it comes back after surgery (recurrent), or that
      cannot be treated with surgery (inoperable) Pulmonary arterial hypertension (PAH) (WHO Group 1) The Adempas clinical studies included mostly patients with WHO functional class II-III symptoms. It is not known if Adempas is safe and effective in
      children.
    </p>
    <p>
      *Adempas is approved to treat adults with: Chronic thromboembolic pulmonary hypertension (CTEPH) (WHO Group 4) treated with surgery but who continue to have high pulmonary blood pressure (persistent) or it comes back after surgery (recurrent), or that
      cannot be treated with surgery (inoperable) Pulmonary arterial hypertension (PAH) (WHO Group 1) The Adempas clinical studies included mostly patients with WHO functional class II-III symptoms. It is not known if Adempas is safe and effective in
      children.
    </p>
    <p>
      *Adempas is approved to treat adults with: Chronic thromboembolic pulmonary hypertension (CTEPH) (WHO Group 4) treated with surgery but who continue to have high pulmonary blood pressure (persistent) or it comes back after surgery (recurrent), or that
      cannot be treated with surgery (inoperable) Pulmonary arterial hypertension (PAH) (WHO Group 1) The Adempas clinical studies included mostly patients with WHO functional class II-III symptoms. It is not known if Adempas is safe and effective in
      children.
    </p>
  </div>
</div>

1 个答案:

答案 0 :(得分:0)

尝试使用以下代码重新绑定底部容器的mousewheel事件。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(function () {
        $('#bottom').bind('mousewheel DOMMouseScroll', function (e) {
            var scrollTo = 0;
            e.preventDefault();
            if (e.type == 'mousewheel') {
                scrollTo = (e.originalEvent.wheelDelta * -1);
            }
            else if (e.type == 'DOMMouseScroll') {
                scrollTo = 40 * e.originalEvent.detail;
                alert("d" + e.originalEvent.detail);
            }
            $(this).scrollTop(scrollTo + $(this).scrollTop());

        });
    });
</script>

结果类似this