IE11上的溢出滾動問題

Question

我有兩個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> 

Answer 1

嘗試使用以下代碼重新綁定底部容器的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>

結果是這樣的 。