如何解决Safari和Mobile上Bootstrap 4 Modal的滚动行为问题
<div class="container-fluid">
<header>
<div class="col-md-6 col-sm-12 main-header text-center center-me">
<img src="logo.png" class="img-fluid logo">
<h1>header</h1>
</div>
</header>
<div class="row text-center text-lg-left">
<div class="col-lg-3 col-md-6 col-sml-12" data-tilt>
<a href="#departmentsModal" #aboutUsModal data-toggle="modal" class="d-block mb-4 h-100">
<img class="img-fluid" src="https://source.unsplash.com/8mUEy0ABdNE/400x400" alt="">
</a>
</div>
<!-- Departments Modal -->
<div class="modal fade" id="departmentsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="container">
<h2>Departments</h2>
<button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="row">
<div class="col-md-4 col-sm-12">
<div class="card card-body card-pic">
<a href="#detail1" data-toggle="collapse">
<img src="https://source.unsplash.com/8mUEy0ABdNE/400x400" class="img-fluid">
</a>
</div>
</div>
<div class="col-12 collapse fade order-md-last" id="detail1">
<div class="card card-body border-top-0 dept-detail">
<h3>English & Social Science Departments</h3>
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Donec eget lorem ultricies,fermentum nunc ac,varius ligula. Suspendisse et arcu at urna pretium dignissim ut id leo. Nam ut metus sapien. Donec maximus velit justo,ut luctus quam fringilla a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce turpis neque,accumsan nec lorem nec,dignissim luctus massa. Quisque quis est erat. Proin commodo lacus ut libero iaculis iaculis. In fringilla venenatis finibus. In venenatis diam erat,ut ultricies erat gravida et.</p>
<p>
Orci varius natoque penatibus et magnis dis parturient montes,nascetur ridiculus mus. Quisque condimentum augue at elit sollicitudin accumsan. Nullam luctus elementum nisl,lacinia condimentum neque ultrices nec. In ut erat auctor,sollicitudin diam eget,tempor nisi. Suspendisse eu porta lacus. Donec scelerisque sapien et libero dictum,ut cursus justo venenatis. In lorem lectus,sollicitudin eu cursus eget,tempor dignissim felis. In hac habitasse platea dictumst. Vestibulum at ante hendrerit,placerat metus in,cursus purus. Pellentesque vitae nunc facilisis sapien ornare ornare sit amet sed tellus. Donec fringilla massa ut suscipit lobortis. Ut pellentesque augue ligula,fermentum convallis turpis imperdiet nec. Mauris ipsum augue,viverra a soDales in,posuere id nibh. Nam porta et ante eget molestie. Nulla dolor risus,feugiat et diam facilisis,tempus maximus leo. Fusce quis libero ex.
</p>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="card card-body card-pic">
<a href="#detail22" data-toggle="collapse">
<img src="https://source.unsplash.com/8mUEy0ABdNE/400x400" class="img-fluid">
</a>
</div>
</div>
<div class="col-12 collapse fade order-md-last" id="detail22">
<div class="card card-body border-top-0 dept-detail">
<h3>English</h3>
<p>TLorem ipsum dolor sit amet,ut ultricies erat gravida et.</p>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="card card-body card-pic">
<a href="#detail3" data-toggle="collapse">
<img src="https://source.unsplash.com/8mUEy0ABdNE/400x400" class="img-fluid">
</a>
</div>
</div>
<div class="col-12 collapse fade order-md-last " id="detail3">
<div class="card card-body border-top-0 dept-detail">
<p>Lorem ipsum dolor sit amet,tempus maximus leo. Fusce quis libero ex.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-6 col-sm-12">
<div class="card card-body card-pic">
<a href="#detail4" data-toggle="collapse">
<img src="https://source.unsplash.com/8mUEy0ABdNE/400x400" class="img-fluid">
</a>
</div>
</div>
<div class="col-12 collapse fade order-md-last" id="detail4">
<div class="card card-body border-top-0 dept-detail">
<p>Lorem ipsum dolor sit amet,tempus maximus leo. Fusce quis libero ex.
</p>
</div>
</div>
<div class="col-md-6 col-lg-6 col-sm-12">
<div class="card card-body card-pic">
<a href="#detail5" data-toggle="collapse">
<img src="https://source.unsplash.com/8mUEy0ABdNE/400x400" class="img-fluid">
</a>
</div>
</div>
<div class="col-12 collapse fade order-md-last" id="detail5">
<div class="card card-body border-top-0 dept-detail">Here are the full details on 1...</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
//enable accordion behavior to show only 1 detail at a time
$('[data-toggle="collapse"]').on('click',function() {
$('.collapse.show').collapse('hide');
this.scrollIntoView()
});
</script>
我希望在引导程序中有一个带有可折叠部分的模式，该模式可以使用scrollIntoView（）自动滚动。当缩小到移动设备时，除了在移动设备上和在Safari中外，它都很好用。如果第一张卡片被展开，然后向下滚动并点击第二张卡片，它将带您到页面底部。即使没有调用scrollIntoView（），也会发生这种情况。
我在http://jsfiddle.net/eprLofx6/2/
处创建了一个jsfiddle演示版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
