Javascript 使多选引导下拉选项位于div之外（防止滚动冒泡）

我在div中有一个bootstrap multiselect下拉列表，如此链接所示

我想有多选下拉列表，它的选项以外的div，也就是说，我不希望外部div（红色）滚动。我希望它类似于正常的下拉列表，下面是我的代码

下面是链接中的代码

HTML:

<div class="FixedHeightContainer">
<h2>Multiselect dropdown</h2>    
<select class="multiselect" multiple="multiple">
    <option value="cheese">    Cheese     </option>
    <option value="tomatoes">  Tomatoes   </option>
    <option value="mozarella"> Mozzarella </option>
    <option value="mushrooms"> Mushrooms  </option>
    <option value="pepperoni"> Pepperoni  </option>
    <option value="onions">    Onions     </option>
    <option value="cheese">    Cheese     </option>
    <option value="tomatoes">  Tomatoes   </option>
    <option value="mozarella"> Mozzarella </option>
    <option value="mushrooms"> Mushrooms  </option>
    <option value="pepperoni"> Pepperoni  </option>
    <option value="onions">    Onions     </option>
    <option value="cheese">    Cheese     </option>
    <option value="tomatoes">  Tomatoes   </option>
    <option value="mozarella"> Mozzarella </option>
    <option value="mushrooms"> Mushrooms  </option>
    <option value="pepperoni"> Pepperoni  </option>
    <option value="onions">    Onions     </option>
</select>
<h3>
   this is the multiselect dropdown 
</h3>
</div>

<div class="FixedHeightContainer">
<h2>Normal Dropdown</h2>        
<select>
    <option value="cheese">    Cheese     </option>
    <option value="tomatoes">  Tomatoes   </option>
    <option value="mozarella"> Mozzarella </option>
    <option value="mushrooms"> Mushrooms  </option>
    <option value="pepperoni"> Pepperoni  </option>
    <option value="onions">    Onions     </option>
    <option value="cheese">    Cheese     </option>
    <option value="tomatoes">  Tomatoes   </option>
    <option value="mozarella"> Mozzarella </option>
    <option value="mushrooms"> Mushrooms  </option>
    <option value="pepperoni"> Pepperoni  </option>
    <option value="onions">    Onions     </option>
    <option value="cheese">    Cheese     </option>
    <option value="tomatoes">  Tomatoes   </option>
    <option value="mozarella"> Mozzarella </option>
    <option value="mushrooms"> Mushrooms  </option>
    <option value="pepperoni"> Pepperoni  </option>
    <option value="onions">    Onions     </option>
</select>
<h3>
   this is the normal dropdown 
</h3>
</div>

JS:

更新： 1.通过使外部div（.FixedHeightContainer），scroll=visible，我去掉了该div的scroll选项。我想要该div的滚动，但在使用multiselect下拉列表时不需要。 使位置=固定或位置=绝对没有帮助

我试着玩z-index，但它似乎不起作用

下拉列表元素可能有问题。找到这个了吗 下拉列表通过CSS自动定位在文档的正常流程中。这意味着下拉列表可能会被具有某些溢出属性的父对象裁剪，或者显示在视口的边界之外。当这些问题出现时，请自行解决

哈维尔的回答在我的笔记本电脑上有效，但在另一台笔记本电脑上无效。两款笔记本电脑的Chrome版本是相同的。还有其他可能的问题吗

试试这个：

.FixedHeightContainer
{

  height: 250px;
  width:250px; 
  padding:3px; 
  background:#f00;
  overflow-y: visible;
  overflow-x: visible;
}

---

好的，CSS不可能在可滚动区域之外显示可滚动内容。悲哀地因此，我选择了Javascript解决方案，遵循您的建议：

$(function() {
    $('.multiselect').multiselect();
});

(function setFixedMultiselects() {
    $('select.multiselect').each(function(index) {
        var $button = $(this).next().children().first();
        var $dropdown = $button.next();
        if ($dropdown.css('display') != 'none') {
            var offset = $button.offset();
            $dropdown.css({
                'position': 'fixed',
                'top': (offset.top+$button.outerHeight())+"px",
                'left': offset.left+"px"
            });
        }
    });
    setTimeout(setFixedMultiselects, 20);
})();

---

您可以按如下方式制作css：

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

然后在单击“多选”时将此css添加到div，然后设置“多选”下拉菜单的位置，使其可见以满足您的需要。我在中对

下拉菜单

进行了固定定位

---

这有助于将下拉列表放置在div之外，但它也限制了外部div（.fixedheightcainer）的容量，使其具有滚动条，以防出于其他目的需要滚动条。我编辑了问题以使我的评论看起来清晰。我不确定您是否理解我的问题。您的代码更改将删除外部div class=“FixedHeightContainer”中的滚动条，这不是我想要的。我想要滚动条，因为我需要使用滚动条来查看小提琴的新编辑，在滚动问题之后，绝对的问题是下拉位置在向下滚动时保持不变，不会随着向右滚动移动。我知道你想要什么，但这并不是你想要的。让我在你的提琴上多做一些工作…通过JavaScript完成。这个选项去掉了我的外部div的滚动条（红色的那个），我仍然需要它。

$(function() {
    $('.multiselect').multiselect();
});

(function setFixedMultiselects() {
    $('select.multiselect').each(function(index) {
        var $button = $(this).next().children().first();
        var $dropdown = $button.next();
        if ($dropdown.css('display') != 'none') {
            var offset = $button.offset();
            $dropdown.css({
                'position': 'fixed',
                'top': (offset.top+$button.outerHeight())+"px",
                'left': offset.left+"px"
            });
        }
    });
    setTimeout(setFixedMultiselects, 20);
})();

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

$('.multiselect').on('focusin',function() {

    $('#div1').addClass('stop-scrolling');
    $('.dropdown-menu').css('overflow', 'auto');
  });

  $('.multiselect').on('focusout',function() {

    $('#div1').removeClass('stop-scrolling');

  });