如何让CSS多选下拉框突破父元素overflow:scroll的限制？

问题原因 #

你的.container元素设置了overflow-x: scroll，而多选组件的下拉面板(.multi-select_options)是.multi-select的子元素，且.multi-select设置了position: relative，导致下拉面板的定位范围被限制在.container内部，无法超出边界完整展示。

解决方案 #

核心思路是将下拉面板脱离原父容器的定位约束，改为基于文档(body)定位，同时保持与输入框的位置对齐。具体修改如下：

1. 调整CSS定位规则 #

移除.multi-select的position: relative，避免它成为下拉面板的定位上下文；给下拉面板增加更高层级确保不被遮挡：

.multi-select {
  max-width: 100%;
  min-width: 200px;
}

.multi-select_options {
  display: none;
  position: absolute;
  width: 100%;
  max-height: 170px;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  background: #fff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
  overflow-x: hidden;
  z-index: 1000;
}

2. 修改JS逻辑动态定位下拉面板 #

在激活下拉面板时，将其移到body中并根据输入框位置计算坐标；关闭时移回原位置：

this.activate = function (that) {
  this.$outer.addClass("is-active");
  this.isActive = true;

  // 获取输入框的位置和尺寸
  const fieldOffset = that.$field.offset();
  const fieldWidth = that.$field.outerWidth();
  const fieldHeight = that.$field.outerHeight();

  // 将下拉面板移到body中并设置位置
  that.$optionList.detach().appendTo('body');
  that.$optionList.css({
    display: 'block',
    top: fieldOffset.top + fieldHeight,
    left: fieldOffset.left,
    width: fieldWidth
  });

  // 点击输入框或下拉面板外部时关闭
  $(document).on("click.closeMulti", function (e) {
    const isOutsideOuter = isOutsideNodeAndChildren(that.$outer, e);
    const isOutsideOptions = isOutsideNodeAndChildren(that.$optionList, e);
    if (isOutsideOuter && isOutsideOptions) {
      that.deactivate();
    }
  });
};

this.deactivate = function () {
  this.$optionList.scrollTop(0);

  this.$outer.removeClass("is-active");
  // 将下拉面板移回原父元素并隐藏
  this.$optionList.hide().appendTo(this.$outer);
  this.isActive = false;

  $(document).off(".closeMulti");
};

修改后的完整代码 #

JavaScript #

/* Multi Select Input JS */

//helper functions

function isOutsideNodeAndChildren($node, e) {
  if (!$node.is(e.target) && $node.has(e.target).length === 0) {
    return true;
  } else {
    return false;
  }
}
// constructor definition
function MultiSelect($select) {
  this.$select = $select;
  this.$outer;
  this.$field;
  this.$optionList;
  this.$options;

  this.isActive = false;

  this.createMultiSelectOption = function (optionText, fieldName) {
    var option = document.createElement("div");
    var checkbox = document.createElement("input");
    var label = document.createElement("label");

    option.className = "multi-select_option";
    option.tabIndex = -1;

    checkbox.className = "multi-select_checkbox";
    checkbox.type = "checkbox";
    checkbox.tabIndex = "-1";
    checkbox.name = fieldName;

    label.className = "multi-select_label";
    label.htmlFor = fieldName;
    label.textContent = optionText;
    label.value = optionText;

    option.appendChild(checkbox);
    option.appendChild(label);

    return option;
  };
  this.toggleSelected = function ($option, e) {
    var $allCheckedOptions;
    var numChecked;
    var checkBox = $option.find(".multi-select_checkbox")[0];
    var $field = $option.parents(".multi-select").find(".multi-select_field");

    if (e.target.type !== "checkbox") {
      checkBox.checked = !checkBox.checked;
    }

    $allCheckedOptions = $option
      .parent()
      .find(".multi-select_option")
      .has(":checked");
    numChecked = $allCheckedOptions.length;

    if (numChecked) {
      $field.removeClass("is-empty");
      $field.text(numChecked < 2 
        ? $allCheckedOptions.find(".multi-select_label").text() 
        : numChecked + " selected");
    } else {
      $field.addClass("is-empty");
      $field.text("Make a selection");
    }
  };

  this.activate = function (that) {
    this.$outer.addClass("is-active");
    this.isActive = true;

    const fieldOffset = that.$field.offset();
    const fieldWidth = that.$field.outerWidth();
    const fieldHeight = that.$field.outerHeight();

    that.$optionList.detach().appendTo('body');
    that.$optionList.css({
      display: 'block',
      top: fieldOffset.top + fieldHeight,
      left: fieldOffset.left,
      width: fieldWidth
    });

    $(document).on("click.closeMulti", function (e) {
      const isOutsideOuter = isOutsideNodeAndChildren(that.$outer, e);
      const isOutsideOptions = isOutsideNodeAndChildren(that.$optionList, e);
      if (isOutsideOuter && isOutsideOptions) {
        that.deactivate();
      }
    });
  };
  this.deactivate = function () {
    this.$optionList.scrollTop(0);

    this.$outer.removeClass("is-active");
    this.$optionList.hide().appendTo(this.$outer);
    this.isActive = false;

    $(document).off(".closeMulti");
  };

  this.attachClickEvents = function (that) {
    this.$field.on("click", function (e) {
      if (that.isActive) return;
      that.activate(that);
    });

    this.$options.on("click", function (e) {
      that.toggleSelected($(this), e);
    });
  };
  this.attachKeyboardEvents = function (that) {
    this.$field.on("keydown", function (e) {
      if (e.keyCode === 9) {
        that.deactivate();
        return;
      }

      if (e.keyCode === 40) {
        that.activate(that);
        that.$options.first().focus();
        e.preventDefault();
        return;
      }
    });

    this.$options.on("keydown", function (e) {
      switch (e.keyCode) {
        case 9:
          that.deactivate();
          break;
        case 13:
          that.toggleSelected($(this), e);
          break;
        case 40:
          $(this).next().focus();
          e.preventDefault();
          break;
        case 38:
          $(this).prev().focus();
          e.preventDefault();
          break;
        default:
          break;
      }
    });
  };

  this.init = function () {
    var that = this;

    var $options = this.$select.find("option");
    var fieldName = this.$select.attr("name");

    var multiSelect = document.createElement("div");
    var field = document.createElement("div");
    var optionsList = document.createElement("div");

    multiSelect.className = "multi-select";
    field.className = "multi-select_field is-empty";
    field.tabIndex = 0;
    field.textContent = "Make a selection";
    optionsList.className = "multi-select_options";

    $options.each(function () {
      if (!this.textContent) return;
      var o = that.createMultiSelectOption(this.textContent, fieldName);
      optionsList.appendChild(o);
    });

    multiSelect.appendChild(field);
    multiSelect.appendChild(optionsList);

    $(multiSelect).insertBefore(this.$select);
    this.$select.remove();
    this.$select = null;

    this.$outer = $(multiSelect);
    this.$field = this.$outer.find(".multi-select_field");
    this.$optionList = this.$outer.find(".multi-select_options");
    this.$options = this.$outer.find(".multi-select_option");

    this.attachClickEvents(this);
    this.attachKeyboardEvents(this);
  };
}

// selectToMultiSelect plugin definition
$.fn.selectToMultiSelect = function (settings) {
  var m = new MultiSelect($(this));
  m.init();
};

$(".js-multi-select").selectToMultiSelect();

CSS #

.container {
  width: 500px;
  height: 50px;
  background: red;
  overflow-x: scroll;
}
.wrapper {
  display: flex;
  gap: 10px;
}

.multi-select {
  max-width: 100%;
  min-width: 200px;
}
.multi-select,
.multi-select *,
.multi-select *:before,
.multi-select *:after {
  box-sizing: border-box;
}
.multi-select_field,
.multi-select_option {
  background: #fff;
  padding-left: 2px;
}
.multi-select_field {
  position: relative;
  height: 25px;
  padding-left: 2px;
  border: 1px solid #aaa;
  line-height: 25px;
  cursor: default;
}
.multi-select_field:hover {
  border-color: #888;
}
.multi-select_field:after {
  content: "";
  position: absolute;
  right: 4px;
  width: 0;
  border-top: 4px solid #000;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  top: 50%;
  transform: translateY(-50%);
}
.multi-select_field.is-empty {
  color: #aaa;
}
.multi-select_options {
  display: none;
  position: absolute;
  width: 100%;
  max-height: 170px;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  background: #fff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
  overflow-x: hidden;
  z-index: 1000;
}
.is-active .multi-select_options {
  display: block;
}
.multi-select_option {
  background: transparent;
  position: relative;
  z-index: 101;
  height: 30px;
  line-height: 30px;
}
.multi-select_option:hover {
  background: #f0f0f0;
}
.multi-select_option:not(:last-child) {
  border-bottom: 1px solid #ddd;
}
.multi-select_label {
  position: relative;
}
.multi-select_checkbox {
  position: relative;
  top: 2px;
  margin-right: 4px;
  z-index: 101;
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="wrapper">
    <input type="text">
    <select name="foo" id="foo">
      <option value="a">Select input</option>
      <option value="a">Select input</option>
      <option value="a">Select input</option>
      <option value="a">Select input</option>
      <option value="a">Select input</option>
    </select>
    <select name="foo" id="foo">
      <option value="a">Select input</option>
      <option value="a">Select input</option>
      <option value="a">Select input</option>
      <option value="a">Select input</option>
      <option value="a">Select input</option>
    </select>
    <select id="dev" name="testField" class="js-multi-select">
      <option value="a">This is option 1</option>
      <option value="b">This is option 2</option>
      <option value="c">This is option 3</option>
      <option value="d">This is option 4</option>
      <option value="e">This is option 5</option>
      <option value="e">This is option 5</option>
    </select>
  </div>
</div>

效果说明 #

修改后，点击"Make a selection"输入框时，下拉面板会脱离滚动容器，完整展示在页面上，不会被父容器的overflow属性截断。关闭下拉面板时，它会回到原组件内部，不影响页面结构。

内容的提问来源于stack exchange，提问作者kevsterdev