如果打开下拉菜单,则该块将不会在触摸设备或鼠标滚轮上滚动。
如果块.modal
具有position: fixed;
和overflow: auto;
,则在Select2下拉列表打开时如何保存滚动?有财产吗?
$(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>