IE11上的溢出滚动问题

问题描述 投票:0回答:1

我有两个ID选择器(顶部,底部)。在顶部,我设置了“position:relative”,在底部,位置是固定的,我把它放在'top'div上。 “overflow:auto”设置为“bottom”div。

当我滚动“底部”div内的内容时,“top”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>
html css internet-explorer overflow css-position
1个回答
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

© www.soinside.com 2019 - 2024. All rights reserved.