Prevent Bootstrap IE dropdown to close on scrollba

问题:

In IE, on click of dropdown menu scrollbar, dropdown closes. It works fine when you scroll it using mouse wheel.

Here is the codeply link: https://www.codeply.com/go/Uh8qadr3q2

Suggest me what's the best way to resolve this issue.

回答1:

New answer

Add a div element within your dropdown-menu which will be scrollable:

<div class="dropdown-menu" role="menu">
  <div class="scrollable-menu">
    <ul class="list-unstyled">
      <li class="dropdown-item"><a href="#">Action</a></li>
      ...
    </ul>
  </div>
</div>

---

Old answer

The solution I used is to add

onclick="event.stopPropagation();"

to the .dropdown-menu

And then call

$('.dropdown-toggle').dropdown('toggle');

when clicking an item in the dropdown menu

回答2:

I see many developers are looking to bypass this issue. Hence, I'm sharing here my solution for it. The idea is to scope click events within the target element boundaries where the scrollbar isn't included:

Add this check to your handleMouseEvent:

if (e.offsetX <= e.target.clientWidth) { onClickOutsideEvent(e); }

Where offsetX property is the X coordinate of the mouse pointer between that event and the padding edge of the target node.

And clientWidth property is zero for elements with no CSS or inline layout boxes; otherwise, it's the inner width of an element in pixels. It includes padding but excludes borders, margins, and vertical scrollbars (if present).

The problem developers are often experiencing is due to the use of clientX property instead of offsetX. clientX provides the horizontal coordinate within the application's client area (the entire document window resolution) at which the event occurred, which is not what we want in cases where we enter a modal popup with a scrollbar. In this case, we'll need the mouse click offset inside the modal dimensions rather the offset in the entire document.

Hope that's helps