jquery - 滚动上的多选下拉菜单保持在顶部

Question

我有一个位置固定为侧边栏的 div。侧面有几个多选下拉菜单。问题是，当我打开任何下拉菜单并滚动侧栏时，下拉菜单会停留在屏幕内。

问题：

$('.jqms').multiselect();

@charset "UTF-8";
.header {
  height: 500px;
  overflow: scroll;
}

html {
  background-color: #fcfcfc;
}

body {
  padding: 1.5em;
  margin: 2em auto;
  max-width: 500px;
  border: 1px solid #ccc;
  background-color: #fff;
}

a {
  transition: color .3s;
  color: blue;
}
a:hover {
  text-decoration: none;
}

h1 {
  margin: 0 0 2rem;
  text-align: center;
}
h1 a {
  color: #000;
  text-decoration: none;
}
h1 a:hover {
  color: blue;
  text-decoration: underline;
}

section {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
}
section > label {
  display: inline-block;
  width: 100px;
}
section + section {
  margin-top: 1rem;
}
section.spacer  {
  border-top: 1px dotted #ccc;
  padding-top: 1rem;
}

footer {
  border-top: 1px dashed #ccc;
  margin-top: 2rem;
  padding-top: .75rem;
  font-size: .75rem;
  text-align: center;
}
footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
footer li {
  display: inline-block;
}
footer li + li {
  margin-left: .5em;
}

.btn {
  margin-left: .5em;
}

/* ---------------------------------------- *
 *  multiselect                             *
 * ---------------------------------------- */
.ui-multiselect--filter, .ui-multiselect--bulk {
  padding: 5px 10px;
  border-bottom: 1px solid #ccc;
}

.ui-multiselect--option, .ui-multiselect--optgroup-wrap label {
  display: block;
  padding: 3px 10px;
}

.ui-multiselect--display {
  position: relative;
  padding-right: 1.4em;
  border: 1px solid #ccc;
  border-radius: 0;
  font-size: 1em;
  cursor: pointer;
  background-color: #fff;
  text-align: left;
}
.ui-multiselect--display:focus {
  outline: none;
}
.ui-multiselect--display:hover {
  background-color: #ddd;
}
.ui-multiselect--icon {
  transform: translateY(-50%);
  display: block;
  position: absolute;
  right: .25em;
  top: 50%;
}
.ui-multiselect--icon:after {
  display: block;
  border: .375em solid transparent;
  border-top-color: #000;
  border-bottom-width: 0;
  content: '';
}
.ui-multiselect--list-wrap {
  position: absolute;
  z-index: 100;
  display: none;
  margin-top: -1px;
  border: 1px solid #ccc;
  background-color: #fff;
}
.ui-multiselect--list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.ui-multiselect--list [type="checkbox"] {
  position: relative;
  top: -2px;
  margin: 0 5px 0 0;
  cursor: pointer;
}
.ui-multiselect--option {
  cursor: pointer;
}
.ui-multiselect--option span {
  white-space: nowrap;
}
.ui-multiselect--option:hover {
  background-color: #ddd;
}
.ui-multiselect--optgroup-wrap label {
  font-weight: bold;
}
.ui-multiselect--is-multiple .ui-multiselect--optgroup-wrap label {
  cursor: pointer;
}
.ui-multiselect--optgroup-wrap.ui-multiselect--disabled label {
  cursor: not-allowed;
}
.ui-multiselect--optgroup-wrap ul {
  padding-left: 0;
}
.ui-multiselect--optgroup-wrap li {
  padding-left: 20px;
}
.ui-multiselect--optgroup-wrap:hover {
  background-color: #f7f7f7;
}
.ui-multiselect--optgroup-wrap + .ui-multiselect--optgroup-wrap {
  border-top: 1px dotted #ccc;
}
.ui-multiselect--selected {
  background-color: #efefef;
}
.ui-multiselect--disabled {
  opacity: .5;
  cursor: not-allowed;
}
.ui-multiselect--disabled [type="checkbox"] {
  cursor: inherit;
}
.ui-multiselect--disabled:hover {
  background-color: transparent;
}
.ui-multiselect--disabled .ui-multiselect--disabled {
  opacity: 1;
}
.ui-multiselect--filter {
  white-space: nowrap;
}
.ui-multiselect--filter label,
.ui-multiselect--filter input,
.ui-multiselect--filter button {
  display: inline-block;
}
.ui-multiselect--filter label:after {
  content: ':';
}
.ui-multiselect--filter input {
  margin: 0 5px;
  padding: 0;
  width: 80px;
}
.ui-multiselect--filter input:focus {
  outline: none;
}
.ui-multiselect--filter button {
  width: 22px;
  height: 22px;
  border-width: 0;
  text-indent: -9999em;
  white-space: nowrap;
  border-radius: 0;
  cursor: pointer;
}
.ui-multiselect--filter button:before {
  float: left;
  text-indent: 0;
  content: 'X';
}
.ui-multiselect--filter button:focus {
  outline: none;
}
.ui-multiselect--bulk button + button {
  margin-left: 5px;
}

.styling .ui-multiselect--display {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  font-size: 1em;
}
.styling .ui-multiselect--display:hover {
  box-shadow: 0 1px 5px 0 lightgreen;
  background-color: #e8fce8;
  border-color: lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//rawgit.com/dirkpeter/jquery-ui.multiselect.widget/dev/src/jquery-ui.multiselect.widget.js"></script>


<div class="header">
<section>
  <label for="select-1">Single</label>
  <select id="select-1" class="jqms">
    <option value="1">Commodo Ridiculus</option>
    <option value="2" selected>Vehicula Euismod</option>
    <option value="3">Ipsum Dapibus</option>
    <option value="4">Mollis Tellus</option>
    <option value="5">Nibh Quam</option>
  </select>
</section>
  
  <section>
  <label for="select-1">Single</label>
  <select id="select-1" class="jqms">
    <option value="1">Commodo Ridiculus</option>
    <option value="2" selected>Vehicula Euismod</option>
    <option value="3">Ipsum Dapibus</option>
    <option value="4">Mollis Tellus</option>
    <option value="5">Nibh Quam</option>
  </select>
</section>
  <section>
  <label for="select-1">Single</label>
  <select id="select-1" class="jqms">
    <option value="1">Commodo Ridiculus</option>
    <option value="2" selected>Vehicula Euismod</option>
    <option value="3">Ipsum Dapibus</option>
    <option value="4">Mollis Tellus</option>
    <option value="5">Nibh Quam</option>
  </select>
</section>
  <section>
  <label for="select-1">Single</label>
  <select id="select-1" class="jqms">
    <option value="1">Commodo Ridiculus</option>
    <option value="2" selected>Vehicula Euismod</option>
    <option value="3">Ipsum Dapibus</option>
    <option value="4">Mollis Tellus</option>
    <option value="5">Nibh Quam</option>
  </select>
</section>
  <section>
  <label for="select-1">Single</label>
  <select id="select-1" class="jqms">
    <option value="1">Commodo Ridiculus</option>
    <option value="2" selected>Vehicula Euismod</option>
    <option value="3">Ipsum Dapibus</option>
    <option value="4">Mollis Tellus</option>
    <option value="5">Nibh Quam</option>
  </select>
</section>
  <section>
  <label for="select-1">Single</label>
  <select id="select-1" class="jqms">
    <option value="1">Commodo Ridiculus</option>
    <option value="2" selected>Vehicula Euismod</option>
    <option value="3">Ipsum Dapibus</option>
    <option value="4">Mollis Tellus</option>
    <option value="5">Nibh Quam</option>
  </select>
</section><section>
  <label for="select-1">Single</label>
  <select id="select-1" class="jqms">
    <option value="1">Commodo Ridiculus</option>
    <option value="2" selected>Vehicula Euismod</option>
    <option value="3">Ipsum Dapibus</option>
    <option value="4">Mollis Tellus</option>
    <option value="5">Nibh Quam</option>
  </select>
</section><section>
  <label for="select-1">Single</label>
  <select id="select-1" class="jqms">
    <option value="1">Commodo Ridiculus</option>
    <option value="2" selected>Vehicula Euismod</option>
    <option value="3">Ipsum Dapibus</option>
    <option value="4">Mollis Tellus</option>
    <option value="5">Nibh Quam</option>
  </select>
</section>
  <section>
  <label for="select-1">Single</label>
  <select id="select-1" class="jqms">
    <option value="1">Commodo Ridiculus</option>
    <option value="2" selected>Vehicula Euismod</option>
    <option value="3">Ipsum Dapibus</option>
    <option value="4">Mollis Tellus</option>
    <option value="5">Nibh Quam</option>
  </select>
</section>
  <section>
  <label for="select-1">Single</label>
  <select id="select-1" class="jqms">
    <option value="1">Commodo Ridiculus</option>
    <option value="2" selected>Vehicula Euismod</option>
    <option value="3">Ipsum Dapibus</option>
    <option value="4">Mollis Tellus</option>
    <option value="5">Nibh Quam</option>
  </select>
</section>
  
 
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 
</div>

https://codepen.io/shahil/pen/gGoJVX

更新：仅当下拉列表放置在 overflow:scroll div 内时，才会出现此问题。

score 0 · Accepted Answer

问题在于.headerdivoverflow:scroll有自己的偏移量和位置。并且下拉选项元素<div class="ui-multiselect--list-wrap">直接放在<body>标签下。因此，当正文滚动时，下拉选项将移动。当滚动.headerdiv <body>psoition 保持不变时，这就是下拉选项保持在同一个位置的原因。

<div class="ui-multiselect--list-wrap">我能想到的一种解决方案是，在 element.xml中移动下拉选项元素.header。滚动时.header，下拉选项将响应滚动。

这是演示：（CSS 与我的修复相混淆。您可能需要正确调整它）

https://codepen.io/anon/pen/zEpVyN

jquery - 滚动上的多选下拉菜单保持在顶部

1 回答 1

Related

Reference