如何禁用模态的滚动条并在模态内的自定义 div 上启用滚动条
How to disable modal's scrollbar and enable scrollbar on custom div inside modal
我有一个 bootstrap 模态框，正文中有两列。
我希望每列单独滚动（主从布局）。
body, html { font-size: 10px }
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">Header</div>
<div class="modal-body">
<div class="row">
<div class="col overflow-auto">Col1 This might be long</div>
<div class="col overflow-auto">Col2 This must be scrolled separately</div>
</div>
</div>
<div class="modal-footer">Footer</div>
</div>
</div>
您必须修改 Bootstrap 默认设置。
首先，您需要将 class .modal-dialog 上模态框的高度固定为 100%，没有 1.75rem 的两个边距 (top/bottom)。
然后您必须将 .modal-content、.row 和 .col 设置为 100% 高度，以使其在您的 div.
中溢出
通过在 .modal-content 上设置它可以阻止页面溢出。剩下的就是激活 overflow:auto，如果你没有在容器上指定任何高度它就不会溢出。
最后，您将 overflow-y:hidden 设置为 .modal-body
所以它应该与下面的 CSS 相匹配:
.modal-dialog{
height:calc(100% - 3.5rem);
}
.modal-content, .modal-body > .row, .modal-body > .row > div.col{
height: 100%;
}
.modal-body{
overflow-y:hidden;
}
演示
body, html { font-size: 10px }
.modal-dialog{
height:calc(100% - 3.5rem);
}
/* ADDED H-100 instead */
/*.modal-content, .modal-body > .row, .modal-body > .row > div.col{
height: 100%;
}*/
.modal-body{
overflow-y:hidden;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content h-100">
<div class="modal-header">Header</div>
<div class="modal-body">
<div class="row h-100">
<div class="col overflow-auto h-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices ultrices erat et auctor. In hac habitasse platea dictumst. Phasellus et rutrum magna. Fusce malesuada feugiat lorem, at aliquam ex convallis vitae. Praesent viverra rhoncus faucibus. Nullam justo enim, congue congue augue venenatis, pellentesque sagittis nisi. Mauris sed luctus quam. In vulputate sed ligula pretium hendrerit. Sed pellentesque, risus in ullamcorper luctus, diam dolor varius ipsum, a tincidunt dolor mi vitae nisl. Integer sed massa a urna mollis cursus.
Praesent mollis magna vitae neque laoreet commodo. Morbi mollis tortor eu posuere maximus. Sed gravida convallis velit, volutpat posuere diam pellentesque ut. Morbi rhoncus congue nunc. Vestibulum dictum scelerisque magna elementum ullamcorper. Morbi vitae nulla lorem. Aliquam suscipit accumsan nulla id laoreet. Suspendisse potenti. Integer convallis odio tortor, non sollicitudin purus vestibulum in. Suspendisse laoreet semper dui. Nunc non nibh tincidunt, imperdiet lacus mollis, venenatis libero. Vivamus pretium et nisi sit amet tempus. Curabitur sodales aliquet condimentum.
Aliquam tincidunt tincidunt enim, vitae rhoncus eros tempor id. Ut porta feugiat tellus ut vulputate. Sed pharetra finibus tortor eu dapibus. Nulla ac scelerisque ipsum. Donec ultricies suscipit neque eu venenatis. Maecenas id placerat libero. Aliquam mattis commodo quam, quis suscipit sapien ullamcorper sagittis. Etiam sem arcu, dictum at ornare quis, pulvinar ut enim. Sed pretium nisl vitae maximus porta. Duis eleifend auctor mauris vitae tempor. Integer hendrerit gravida risus, in tincidunt nibh placerat et. Praesent sit amet justo diam. Nam non suscipit nisi. Cras congue, erat a malesuada luctus, sapien sem elementum eros, ut mattis urna quam posuere nunc. Aenean aliquet augue id dui consequat condimentum.</div>
<div class="col overflow-auto h-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum urna nibh, pretium vitae nisi id, pulvinar eleifend massa. Phasellus fringilla et ante et fermentum. Pellentesque ex arcu, sodales id massa quis, porta placerat magna. Etiam maximus felis massa, quis euismod erat sollicitudin et. Sed vulputate sapien quis magna sagittis placerat. Donec ullamcorper interdum nulla non suscipit. Etiam vehicula libero in sem mattis sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse blandit mollis est, sit amet dapibus nisl imperdiet nec. Fusce quis tortor massa. Nam tempor aliquam auctor. Suspendisse lacinia feugiat ornare. Integer bibendum sodales mauris, id iaculis quam.
Cras accumsan accumsan orci, ac molestie velit. Aenean eu facilisis mi. Quisque et nulla enim. Vestibulum tincidunt mauris ac turpis rutrum pretium. In sagittis velit nisi, a sollicitudin massa ultrices id. Integer at felis elit. Duis mi libero, facilisis suscipit turpis sed, scelerisque consequat nisi. Cras leo dui, efficitur nec iaculis ac, dictum nec nibh. Morbi sed eros purus. Curabitur ultrices euismod ex non sagittis. Duis tincidunt dui ac ante maximus, et eleifend orci euismod.
Pellentesque quis massa nisi. Morbi at diam vel magna imperdiet tristique. Mauris in elementum justo, nec cursus ligula. Duis laoreet vestibulum ex in malesuada. Mauris in nulla efficitur, maximus libero quis, facilisis tellus. Integer faucibus leo et dolor semper ultrices. Maecenas eu imperdiet erat. Vivamus venenatis malesuada nunc eu ultricies. Etiam ornare maximus sollicitudin. Vestibulum faucibus, purus at vestibulum consequat, massa felis scelerisque sapien, vel tempor ex nisi eu ipsum. Etiam vitae massa bibendum, luctus massa in, pellentesque nunc. Aliquam ac purus ut purus scelerisque euismod. Curabitur ultrices eros a eros aliquam pellentesque. Sed bibendum quam ac eros semper, ut ornare elit imperdiet. Nulla facilisi. Phasellus finibus venenatis ipsum, nec viverra quam maximus tempus.
Etiam a viverra sapien. Donec risus metus, egestas quis justo ut, tincidunt lobortis erat. Nulla facilisi. Nunc volutpat, eros et condimentum porttitor, ligula ante blandit mauris, vel vulputate tortor orci at mi. Nam pretium in risus nec placerat. Nunc efficitur vitae quam quis maximus. Vivamus eu justo sit amet mi maximus semper vitae at leo. Fusce gravida ultricies lacinia. Curabitur laoreet sagittis quam in porttitor. Donec at neque ac est fermentum placerat. Fusce consequat sapien nec nunc porta, rutrum blandit ipsum sodales. Nulla egestas blandit metus nec molestie. Nunc facilisis justo massa, vitae aliquet libero mollis sit amet. Donec placerat sollicitudin metus, sit amet eleifend tortor accumsan nec. Phasellus velit ipsum, venenatis eget convallis sit amet, rutrum vitae mauris.
Fusce at faucibus erat. Quisque ex ligula, volutpat id nisi eget, tristique aliquam sapien. In posuere, arcu eget cursus dictum, magna turpis bibendum ipsum, sed fringilla mi tortor ut libero. Vivamus venenatis molestie lorem dignissim gravida. Fusce bibendum aliquam neque eu aliquet. Etiam volutpat rutrum dolor, id ultricies eros. In vel commodo risus, at pretium orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>
</div>
</div>
<div class="modal-footer">Footer</div>
</div>
</div>
</div>
我有一个 bootstrap 模态框，正文中有两列。
我希望每列单独滚动（主从布局）。
body, html { font-size: 10px }
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">Header</div>
<div class="modal-body">
<div class="row">
<div class="col overflow-auto">Col1 This might be long</div>
<div class="col overflow-auto">Col2 This must be scrolled separately</div>
</div>
</div>
<div class="modal-footer">Footer</div>
</div>
</div>
您必须修改 Bootstrap 默认设置。
首先，您需要将 class .modal-dialog 上模态框的高度固定为 100%，没有 1.75rem 的两个边距 (top/bottom)。
然后您必须将 .modal-content、.row 和 .col 设置为 100% 高度，以使其在您的 div.
通过在 .modal-content 上设置它可以阻止页面溢出。剩下的就是激活 overflow:auto，如果你没有在容器上指定任何高度它就不会溢出。
最后，您将 overflow-y:hidden 设置为 .modal-body
所以它应该与下面的 CSS 相匹配:
.modal-dialog{
height:calc(100% - 3.5rem);
}
.modal-content, .modal-body > .row, .modal-body > .row > div.col{
height: 100%;
}
.modal-body{
overflow-y:hidden;
}
演示
body, html { font-size: 10px }
.modal-dialog{
height:calc(100% - 3.5rem);
}
/* ADDED H-100 instead */
/*.modal-content, .modal-body > .row, .modal-body > .row > div.col{
height: 100%;
}*/
.modal-body{
overflow-y:hidden;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content h-100">
<div class="modal-header">Header</div>
<div class="modal-body">
<div class="row h-100">
<div class="col overflow-auto h-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices ultrices erat et auctor. In hac habitasse platea dictumst. Phasellus et rutrum magna. Fusce malesuada feugiat lorem, at aliquam ex convallis vitae. Praesent viverra rhoncus faucibus. Nullam justo enim, congue congue augue venenatis, pellentesque sagittis nisi. Mauris sed luctus quam. In vulputate sed ligula pretium hendrerit. Sed pellentesque, risus in ullamcorper luctus, diam dolor varius ipsum, a tincidunt dolor mi vitae nisl. Integer sed massa a urna mollis cursus.
Praesent mollis magna vitae neque laoreet commodo. Morbi mollis tortor eu posuere maximus. Sed gravida convallis velit, volutpat posuere diam pellentesque ut. Morbi rhoncus congue nunc. Vestibulum dictum scelerisque magna elementum ullamcorper. Morbi vitae nulla lorem. Aliquam suscipit accumsan nulla id laoreet. Suspendisse potenti. Integer convallis odio tortor, non sollicitudin purus vestibulum in. Suspendisse laoreet semper dui. Nunc non nibh tincidunt, imperdiet lacus mollis, venenatis libero. Vivamus pretium et nisi sit amet tempus. Curabitur sodales aliquet condimentum.
Aliquam tincidunt tincidunt enim, vitae rhoncus eros tempor id. Ut porta feugiat tellus ut vulputate. Sed pharetra finibus tortor eu dapibus. Nulla ac scelerisque ipsum. Donec ultricies suscipit neque eu venenatis. Maecenas id placerat libero. Aliquam mattis commodo quam, quis suscipit sapien ullamcorper sagittis. Etiam sem arcu, dictum at ornare quis, pulvinar ut enim. Sed pretium nisl vitae maximus porta. Duis eleifend auctor mauris vitae tempor. Integer hendrerit gravida risus, in tincidunt nibh placerat et. Praesent sit amet justo diam. Nam non suscipit nisi. Cras congue, erat a malesuada luctus, sapien sem elementum eros, ut mattis urna quam posuere nunc. Aenean aliquet augue id dui consequat condimentum.</div>
<div class="col overflow-auto h-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum urna nibh, pretium vitae nisi id, pulvinar eleifend massa. Phasellus fringilla et ante et fermentum. Pellentesque ex arcu, sodales id massa quis, porta placerat magna. Etiam maximus felis massa, quis euismod erat sollicitudin et. Sed vulputate sapien quis magna sagittis placerat. Donec ullamcorper interdum nulla non suscipit. Etiam vehicula libero in sem mattis sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse blandit mollis est, sit amet dapibus nisl imperdiet nec. Fusce quis tortor massa. Nam tempor aliquam auctor. Suspendisse lacinia feugiat ornare. Integer bibendum sodales mauris, id iaculis quam.
Cras accumsan accumsan orci, ac molestie velit. Aenean eu facilisis mi. Quisque et nulla enim. Vestibulum tincidunt mauris ac turpis rutrum pretium. In sagittis velit nisi, a sollicitudin massa ultrices id. Integer at felis elit. Duis mi libero, facilisis suscipit turpis sed, scelerisque consequat nisi. Cras leo dui, efficitur nec iaculis ac, dictum nec nibh. Morbi sed eros purus. Curabitur ultrices euismod ex non sagittis. Duis tincidunt dui ac ante maximus, et eleifend orci euismod.
Pellentesque quis massa nisi. Morbi at diam vel magna imperdiet tristique. Mauris in elementum justo, nec cursus ligula. Duis laoreet vestibulum ex in malesuada. Mauris in nulla efficitur, maximus libero quis, facilisis tellus. Integer faucibus leo et dolor semper ultrices. Maecenas eu imperdiet erat. Vivamus venenatis malesuada nunc eu ultricies. Etiam ornare maximus sollicitudin. Vestibulum faucibus, purus at vestibulum consequat, massa felis scelerisque sapien, vel tempor ex nisi eu ipsum. Etiam vitae massa bibendum, luctus massa in, pellentesque nunc. Aliquam ac purus ut purus scelerisque euismod. Curabitur ultrices eros a eros aliquam pellentesque. Sed bibendum quam ac eros semper, ut ornare elit imperdiet. Nulla facilisi. Phasellus finibus venenatis ipsum, nec viverra quam maximus tempus.
Etiam a viverra sapien. Donec risus metus, egestas quis justo ut, tincidunt lobortis erat. Nulla facilisi. Nunc volutpat, eros et condimentum porttitor, ligula ante blandit mauris, vel vulputate tortor orci at mi. Nam pretium in risus nec placerat. Nunc efficitur vitae quam quis maximus. Vivamus eu justo sit amet mi maximus semper vitae at leo. Fusce gravida ultricies lacinia. Curabitur laoreet sagittis quam in porttitor. Donec at neque ac est fermentum placerat. Fusce consequat sapien nec nunc porta, rutrum blandit ipsum sodales. Nulla egestas blandit metus nec molestie. Nunc facilisis justo massa, vitae aliquet libero mollis sit amet. Donec placerat sollicitudin metus, sit amet eleifend tortor accumsan nec. Phasellus velit ipsum, venenatis eget convallis sit amet, rutrum vitae mauris.
Fusce at faucibus erat. Quisque ex ligula, volutpat id nisi eget, tristique aliquam sapien. In posuere, arcu eget cursus dictum, magna turpis bibendum ipsum, sed fringilla mi tortor ut libero. Vivamus venenatis molestie lorem dignissim gravida. Fusce bibendum aliquam neque eu aliquet. Etiam volutpat rutrum dolor, id ultricies eros. In vel commodo risus, at pretium orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>
</div>
</div>
<div class="modal-footer">Footer</div>
</div>
</div>
</div>