Как сохранить свиток, когда раскрывающийся список (select2) открыт, если блок .modal имеет позицию: fixed; и переполнение: авто; - PullRequest
Новая
       14

Как сохранить свиток, когда раскрывающийся список (select2) открыт, если блок .modal имеет позицию: fixed; и переполнение: авто;

0 голосов
/ 05 июля 2019

Если открыть раскрывающийся список, блок не будет прокручиваться на сенсорном устройстве или колесе мыши.

Как сохранить прокрутку при открытом раскрывающемся списке Select2, если в блоке .modal есть position: fixed; и overflow: auto;?Есть ли недвижимость? 

$(document).ready(function() {
  $(".js-source-states").select2({});
});
body {
  font-family: Arial, sans-serif;
  font-size: 12px;
}

select {
  width: 300px;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.modal-wrap {
  width: 100%;
  position: relative;
  margin: 0 auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>
<div class="modal">
  <div class="modal-wrap">
    Scroll down
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim id, cum pariatur inventore adipisci blanditiis debitis possimus nulla. Officiis omnis soluta ab, perspiciatis. Sapiente saepe libero incidunt excepturi, officia aspernatur, corporis quod
      iure alias temporibus enim nostrum. Rerum modi unde porro, incidunt saepe perferendis cumque odit debitis beatae labore officia assumenda ex doloremque, iure, sapiente quas culpa obcaecati dicta iusto libero quod praesentium molestiae. Sapiente
      voluptatem consectetur doloribus temporibus suscipit quisquam incidunt ratione corporis odio laborum animi eaque a explicabo, eos iste error fugit commodi asperiores labore, aut maxime! Corporis mollitia, deserunt. Voluptatem nam illum consequuntur
      aspernatur, illo qui minima officiis enim incidunt unde suscipit eius exercitationem libero eligendi, dolorem numquam dolor, magnam similique non modi molestias voluptatibus laborum iste. Voluptate esse nisi velit illo aliquid veritatis deserunt.
      Tempora sunt et, distinctio quo ad deserunt nemo dignissimos culpa fugit minus, provident eaque consectetur natus incidunt autem reprehenderit vero facere! Quidem, nulla. Sit cupiditate minima sint labore. Odit assumenda earum quas ducimus debitis
      distinctio quia sint voluptatibus aut a exercitationem, aspernatur animi aliquid iste maiores quam culpa facilis minus consequatur blanditiis, autem recusandae! At et, sit nobis mollitia. Ab eligendi quos vitae maxime omnis tempora eveniet animi,
      voluptate magni sunt, necessitatibus! Sit ipsam nulla aliquid assumenda beatae tempora similique at, veritatis, vitae! Quisquam totam, molestiae veniam omnis, nam nisi pariatur, suscipit quia unde minus eos ex? Soluta laborum, culpa dolore? Quia,
      delectus, possimus. Voluptatibus neque minima rerum corporis dolorum quidem natus obcaecati perferendis dolore, molestiae nihil consectetur illo atque autem, ut. Quam commodi molestiae soluta autem quia nam sapiente quae laborum explicabo fugiat
      iste illo, labore placeat voluptatem tenetur obcaecati hic, incidunt sequi deleniti minima iusto sit aspernatur totam. Rem laboriosam voluptates exercitationem aut quis aliquid, eos, qui necessitatibus ratione vel a ipsa, enim. Non vel sint qui
      quidem error consequuntur.</p>
    <select class="js-source-states">
      <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
      </optgroup>
      <optgroup label="Pacific Time Zone">
        <option value="CA">California</option>
        <option value="NV">Nevada</option>
        <option value="OR">Oregon</option>
        <option value="WA">Washington</option>
      </optgroup>
      <optgroup label="Mountain Time Zone">
        <option value="AZ">Arizona</option>
        <option value="CO">Colorado</option>
        <option value="ID">Idaho</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NM">New Mexico</option>
        <option value="ND">North Dakota</option>
        <option value="UT">Utah</option>
        <option value="WY">Wyoming</option>
      </optgroup>
      <optgroup label="Central Time Zone">
        <option value="AL">Alabama</option>
        <option value="AR">Arkansas</option>
        <option value="IL">Illinois</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="OK">Oklahoma</option>
        <option value="SD">South Dakota</option>
        <option value="TX">Texas</option>
        <option value="TN">Tennessee</option>
        <option value="WI">Wisconsin</option>
      </optgroup>
      <optgroup label="Eastern Time Zone">
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="IN">Indiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="OH">Ohio</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WV">West Virginia</option>
      </optgroup>
    </select>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim id, cum pariatur inventore adipisci blanditiis debitis possimus nulla. Officiis omnis soluta ab, perspiciatis. Sapiente saepe libero incidunt excepturi, officia aspernatur, corporis quod
      iure alias temporibus enim nostrum. Rerum modi unde porro, incidunt saepe perferendis cumque odit debitis beatae labore officia assumenda ex doloremque, iure, sapiente quas culpa obcaecati dicta iusto libero quod praesentium molestiae. Sapiente
      voluptatem consectetur doloribus temporibus suscipit quisquam incidunt ratione corporis odio laborum animi eaque a explicabo, eos iste error fugit commodi asperiores labore, aut maxime! Corporis mollitia, deserunt. Voluptatem nam illum consequuntur
      aspernatur, illo qui minima officiis enim incidunt unde suscipit eius exercitationem libero eligendi, dolorem numquam dolor, magnam similique non modi molestias voluptatibus laborum iste. Voluptate esse nisi velit illo aliquid veritatis deserunt.
      Tempora sunt et, distinctio quo ad deserunt nemo dignissimos culpa fugit minus, provident eaque consectetur natus incidunt autem reprehenderit vero facere! Quidem, nulla. Sit cupiditate minima sint labore. Odit assumenda earum quas ducimus debitis
      distinctio quia sint voluptatibus aut a exercitationem, aspernatur animi aliquid iste maiores quam culpa facilis minus consequatur blanditiis, autem recusandae! At et, sit nobis mollitia. Ab eligendi quos vitae maxime omnis tempora eveniet animi,
      voluptate magni sunt, necessitatibus! Sit ipsam nulla aliquid assumenda beatae tempora similique at, veritatis, vitae! Quisquam totam, molestiae veniam omnis, nam nisi pariatur, suscipit quia unde minus eos ex? Soluta laborum, culpa dolore? Quia,
      delectus, possimus. Voluptatibus neque minima rerum corporis dolorum quidem natus obcaecati perferendis dolore, molestiae nihil consectetur illo atque autem, ut. Quam commodi molestiae soluta autem quia nam sapiente quae laborum explicabo fugiat
      iste illo, labore placeat voluptatem tenetur obcaecati hic, incidunt sequi deleniti minima iusto sit aspernatur totam. Rem laboriosam voluptates exercitationem aut quis aliquid, eos, qui necessitatibus ratione vel a ipsa, enim. Non vel sint qui
      quidem error consequuntur.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim id, cum pariatur inventore adipisci blanditiis debitis possimus nulla. Officiis omnis soluta ab, perspiciatis. Sapiente saepe libero incidunt excepturi, officia aspernatur, corporis quod
      iure alias temporibus enim nostrum. Rerum modi unde porro, incidunt saepe perferendis cumque odit debitis beatae labore officia assumenda ex doloremque, iure, sapiente quas culpa obcaecati dicta iusto libero quod praesentium molestiae. Sapiente
      voluptatem consectetur doloribus temporibus suscipit quisquam incidunt ratione corporis odio laborum animi eaque a explicabo, eos iste error fugit commodi asperiores labore, aut maxime! Corporis mollitia, deserunt. Voluptatem nam illum consequuntur
      aspernatur, illo qui minima officiis enim incidunt unde suscipit eius exercitationem libero eligendi, dolorem numquam dolor, magnam similique non modi molestias voluptatibus laborum iste. Voluptate esse nisi velit illo aliquid veritatis deserunt.
      Tempora sunt et, distinctio quo ad deserunt nemo dignissimos culpa fugit minus, provident eaque consectetur natus incidunt autem reprehenderit vero facere! Quidem, nulla. Sit cupiditate minima sint labore. Odit assumenda earum quas ducimus debitis
      distinctio quia sint voluptatibus aut a exercitationem, aspernatur animi aliquid iste maiores quam culpa facilis minus consequatur blanditiis, autem recusandae! At et, sit nobis mollitia. Ab eligendi quos vitae maxime omnis tempora eveniet animi,
      voluptate magni sunt, necessitatibus! Sit ipsam nulla aliquid assumenda beatae tempora similique at, veritatis, vitae! Quisquam totam, molestiae veniam omnis, nam nisi pariatur, suscipit quia unde minus eos ex? Soluta laborum, culpa dolore? Quia,
      delectus, possimus. Voluptatibus neque minima rerum corporis dolorum quidem natus obcaecati perferendis dolore, molestiae nihil consectetur illo atque autem, ut. Quam commodi molestiae soluta autem quia nam sapiente quae laborum explicabo fugiat
      iste illo, labore placeat voluptatem tenetur obcaecati hic, incidunt sequi deleniti minima iusto sit aspernatur totam. Rem laboriosam voluptates exercitationem aut quis aliquid, eos, qui necessitatibus ratione vel a ipsa, enim. Non vel sint qui
      quidem error consequuntur.</p>
  </div>
</div>
...