Problem with overflow scroll in Internet Explorer 11

Question

Problem with overflow scroll in Internet Explorer 11

I'm working with two ID selectors, 'top' and 'bottom'. The 'top' div has a "position: relative" setting while the 'bottom' div has a fixed position and overlaps the 'top' div. I have also set an "overflow:auto" property on the 'bottom' div.

The issue arises when scrolling the content inside the 'bottom' div in Internet Explorer browser. The content inside the 'top' div also scrolls along with it.

My goal is to ensure that when scrolling the content inside the 'bottom' div (with position: fixed), only that content should scroll. The content within the 'top' div should remain static.

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 information...
    </p>
    <p>
      *More Adempas details...
    </p>
    
  </div>
</div>
<div id="bottom">
  <div class="content">
    <p>
      *Additional Adempas info...
    </p>
    <p>
      *Even more Adempas details...
    </p>
    
  </div>
</div>

html css internet-explorer overflow css-position

Answer 1

Answer №1

To effectively re-bind the mousewheel event for the bottom container, you can utilize the code snippet provided below:

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

View the resulting demonstration here.

Answer 2

To effectively re-bind the mousewheel event for the bottom container, you can utilize the code snippet provided below:

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

View the resulting demonstration here.

Problem with overflow scroll in Internet Explorer 11

Answer №1

Similar questions

The offcanvas menu in the NextJS Tailwind website does not handle hover or tap events properly when outside of the parent dimensions

Stylish border radius for Bootstrap progress bars

Having trouble with the Ajax load function not functioning in your HTML code?

Remove three text elements to the right of the small icon with no line breaks

Are you curious about the array of elements in React's carousel?

Vue 3 now allows for disabling the automatic renaming of CSS properties like "top/bottom/left/right" to "inset"

How can I automatically copy a highlighted link in HTML?

Encoding data using Angular

React with TypeScript is throwing an error that says: "The type 'string' does not have any properties in common with the type 'CSSProperties'."

Problem encountered in AngularJS CheckBox binding where the checkbox remains unchecked despite the model having a checked value

How to align buttons in the center of a Bootstrap grid column using Angular's *ngFor directive

Tips for navigating between slides on a CSS carousel?

Please provide an explanation for the statement "document.styleSheets[0].cssRules[0].style;"

Locking mat-toolbar and mat-tabs to the top in Angular Material 2

Is there a way to retrieve the left offset of a floating element even when it is positioned outside the viewport?

Reset input value when adding or removing inputs dynamically

React, Axios, and the PokeAPI are like a team of explorers navigating an

Solution to trigger CSS :hover to refresh following a transition (such as expanding a menu)

What is the method for implementing a dropdown box with select and non-select checkboxes, similar to the example shown in the image, using AngularJS?

using node-sass with several different starting points