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 内に配置されている場合にのみ発生します。

Answer 1

問題は、独自のオフセットと位置を持つ.headerdivにあります。overflow:scrollまた、ドロップダウン オプション要素は、タグ<div class="ui-multiselect--list-wrap">の直下に配置されます。<body>そのため、本文がスクロールされるとドロップダウン オプションが移動します。スクロール.headerdivの位置が変わらない場合<body>、ドロップダウン オプションが同じ場所に留まるのはそのためです。

私が考えることができる1つの解決策は、ドロップダウンオプション要素を要素<div class="ui-multiselect--list-wrap">内に移動すること.headerです。が.headerスクロールされると、ドロップダウン オプションがスクロールに応答します。

デモは次のとおりです: (CSS は私の修正でめちゃくちゃです。適切に調整する必要があるかもしれません)

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