Overflow scrolling issue on IE11

Asked by At

I have two ID selectors(top, bottom). In top, I've set the "position: relative" and in bottom, the position is fixed and I have placed it over the 'top' div. The "overflow:auto" is set to the 'bottom' div.

When I scroll the content inside the 'bottom' div, the content inside the 'top' div is also getting scrolled in IE browser.

All I need to know is when I scroll the bottom content (position: fixed), only it should work. The content in top div shouldn't scroll.

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 Answers

0
Zhi Lv - MSFT On

Try to use the following code to re-bind the mousewheel event for the bottom container.

<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>

The result like this.