Проблема с переполнением в IE11 - PullRequest
Новая
       40

Проблема с переполнением в IE11

0 голосов
/ 25 апреля 2019

У меня есть два идентификатора (вверху, внизу). В верхней части я установил «position :lative», а в нижней части положение зафиксировано, и я поместил его над «top» 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 голосов
/ 01 мая 2019

Попробуйте использовать следующий код для повторной привязки события 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 .

...