Scroll locking on bootstrap4 modal when scrolling on content which has already reached the top

prevent body from scrolling when a modal is opened
modal-dialog-scrollable not working
bootstrap modal scroll with page
enable body scroll when modal is open
modal popup scroll with page
bootstrap modal prevent scroll to top
css disable scroll on div
body-scroll-lock

I have a bootstrap 4 modal with scrollable content. If I'm on the top of the content and I try to scroll downwards (which won't do anything as I'm already on the top of the scrollable content ) and then whilst still holding the touch (touchend has still not occured here) and then I try to scroll the other way, scrolling is locked and won't work until I left go of the touch (touchend occurs) and then now try to scroll in the other direction. I'm having this difficulty on touch devices (regardless of os).

This may not be a bug and instead was intended but I'm unable to think of a way to change the behaviour so that I can continuously scroll even if were already at the top.

codepen.io/heychris/pen/dMExrG recreate steps - open developer tools in chrome, change to a touch device such as iPhone X

i think this cover your problem

body {
  padding: 20px;
}

div {
  width: 200px;
  height: 200px;
  margin-right: 20px;
  overflow-y: scroll; /* has to be scroll, not auto */
  float: left;
}

.touch {
  -webkit-overflow-scrolling: touch;
}
<div class="touch">
<h3>Smooth</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

Prevent Page Scrolling When a Modal is Open, If I'm on the top of the content and I try to scroll downwards (which won't Scroll locking on bootstrap4 modal when scrolling on content which has already reached the top I have a bootstrap 4 modal with scrollable content. Questions: I’m trying to fit a lot of text into a modal box created using Twitter Bootstrap but I’m having a problem: the content refuses to scroll. I tried adding overflow:scroll and overflow-y:scroll but to no avail; that merely causes it to display a scroll-bar without actually enabling scrolling.

This is actually Bootstrap 4 default functionality, you can review the official documentation here.

To override the functionality and add scroll on modal-body you have to write some CSS.

.modal-body {
    overflow: auto;
    max-height: calc(100vh - 224px);
}

I just apply overflow and max-height CSS property on modal-body element and also use calc property in max-height to less modal-header, modal-footer and extra margin from modal-body.

Below you can find working code snippet and i also create CodePen Example. Try this i hope it'll help you out. Thanks

.modal-body {
    overflow: auto;
    max-height: calc(100vh - 224px);
}
<!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">

      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h4>Text in a modal</h4>
        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

        <h4>Popover in a modal</h4>
        <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>

        <h4>Tooltips in a modal</h4>
        <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>

        <hr>

        <h4>Overflowing text to show scroll behavior</h4>
        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>

    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>

<div class="bd-example" style="padding-bottom: 24px;">
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
  </button>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Modal � Bootstrap, You open a modal, scroll through it, close it, and wind up somewhere else on the page Even the Cock-lane ghost had been laid only a round dozen of years, after Mere messages in the earthly order of events had lately come to the But now we're automatically scrolled back up to the top of the screen,� I am creating bootstrap pop-up modal data dynamically on button click when the button is clicked jQuery datatable content is loaded dynamically in Bootstrap pop-up modal and it is shown as needed. Scroll works at first, but when content is changed in jQuery datatable using filtering options, scroll in modal pop-up doesn't work.

If you don't need to scroll header and footer of modal then you can use modal-dialog-scrollable which predefined class in bootstrap4.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary m-5" data-toggle="modal" data-target="#exampleModalScrollable">
  Launch Demo Modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         <br>
         <strong>Last Text</strong>
        </p>
      </div>
    </div>
  </div>
</div>

Disable body-level scrolling when a dialog is open as a modal , Scroll locking on bootstrap4 modal when scrolling on content which has already reached the top. I have a bootstrap 4 modal with scrollable� 4 Scroll locking on bootstrap4 modal when scrolling on content which has already reached the top Dec 24 '19 4 EWS Managed Api - Retrieving e-mails from Office365 exchange server Mar 12 '15 3 How to pass parameter value to SqlDataSource Mar 20 '13

You have to set the height of the .modal-body in and give it overflow-y: auto. Also reset .modal-dialog overflow value to initial

.

See the working (an idea):

.modal{
    display: block !important; /* I added this to see the modal, you don't need this */
}

/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body {
    position: relative;
    padding: 15px;
    height: 40vh;
    overflow: scroll;
}

/* CSS used here will be applied after bootstrap.css */

.modal{
    display: block !important;
}
.modal-dialog{
      overflow-y: initial !important
}
.modal-body{
  height: 250px;
  overflow-y: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" style="overflow-y: scroll; max-height:85%;  margin-top: 50px; margin-bottom:50px;"> 
        <div class="modal-content"> 
            <div class="modal-header"> 
                <h3 class="modal-title">ASDFASDFASDFASDF</h3> 
            </div> 
            <div class="modal-body">ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
          ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
          ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
          ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
          ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
          ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
          ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
          ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
          ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
          ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
          ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
          ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF</div> 
            <div class="modal-footer">ASDFASDFASDFASDF</div> 
        </div> 
    </div> 
</div>

Bootstrap 4 sticky header on scroll, Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. Below is a static modal example ( meaning its position and display have been overridden). Scrolling long content You can also create a scrollable modal that allows scroll the modal body by adding� This works, but there’s still a little leakage here after the modal is closed. Specifically, it appears that the page already loses its scroll position when the modal is open and the body set to be fixed. So we have to retrieve the location. Let’s modify our JavaScript to account for that. // When the modal is hidden

How To Create an On Scroll Fixed Header, When a dialog is opened with the "modal" option, all other elements on the page are but this trigger `body` scrolls back to the top. were not� The scroll bar is shown in my modal window, but the window only scrolls with mouse wheel Bartłomiej Malanowski staff pro premium commented 2 years ago

Fixed header on scroll html codepen, Scroll works at first, but when content is changed in jQuery datatable using filtering and navbar) I would like the navbar to become sticky as soon as it reaches the top. 1. stickyTableHeaders: When the sticky header is enabled. modal-content Bootstrap example of Fixed Header Scrolling Table using HTML , Javascript,� To display more content in Modal we need to make the bootstrap scrollable for this we need to add css property overflow-y scroll in Modal body. Here in this tutorial we are going to explain how you can make bootstrap modal body content scrollable. You can also use our online editor to edit and run the code online.

Prevent Body Scrolling on Mobile Navigation Open, Page content */ .content { padding: 16px; } /* The sticky class is added to the header with JS when it reaches its scroll position */ .sticky { position: fixed; top: 0; Questions: I’m currently using the bootstrap modal plugin to display long legal messages on a website I’m designing, but the problem is that if you open one modal after the other, the second one will already be scrolled to whatever position the first one was. So I’m looking for a way to scroll a div

Comments
  • You just want the scroll in between the modal body right?
  • Okay, I will do it. Give me some time.
  • Here is the link stackoverflow.com/questions/41302241/…
  • Wait I am sending you code.
  • @JARRRRG You can solve scrolling issue without write single line of css code, If using Bootstrap4 library. So put modal-dialog-scrollable class with modal-dialog class.
  • Thank you for your answer, I will attempt to implement this later today and report back to you. Will also produce a codepen to demonstrate.
  • Tried this, unable to fix it with this
  • @Hassan You can solve scrolling issue without write single line of css code, If using Bootstrap4 library. So put modal-dialog-scrollable class with modal-dialog class.
  • I'm going to test this today and get back to you, kind regards
  • I tested in your codepen and it doesn't actually fix the issue. I have still however upvoted.
  • @JARRRRG i just update my codepen code with the css updates, you can review it and if you are facing any issue on codepen you can use above code snippet. Thanks
  • Thanks ill give it a go when I get a chance @HassanSiddiqui
  • I'm going to test this today and get back to you, kind regards