Keeping the scroll in place on a Bootstrap4 modal while scrolling through content that is already at the top

Question

Keeping the scroll in place on a Bootstrap4 modal while scrolling through content that is already at the top

On my Bootstrap 4 modal, I have encountered an issue with scrollable content. When I am at the top of the content and try to scroll downwards, nothing happens because I am already at the top. However, if I continue to hold the touch without releasing it, then attempt to scroll in the opposite direction, the scrolling gets locked and won't work until I release the touch. This problem is specific to touch devices regardless of the operating system.

It's unclear whether this behavior is a bug or intentional design, and I'm struggling to find a way to allow continuous scrolling even when at the top of the content.

https://i.sstatic.net/ChbxG.gif

To recreate this issue, visit codepen.io/heychris/pen/dMExrG and follow these steps: open developer tools in Chrome, switch to a touch device like iPhone X.

javascript html css bootstrap-4 bootstrap-modal

Answer 1

Answer №1

It looks like this solution should solve your issue

body {
  padding: 20px;
}

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

.touch {
  -webkit-overflow-scrolling: touch;
}


<div class="touch">
<h3>Smooth</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla justo at turpis tincidunt vulputate. Aliquam erat volutpat. Sed scelerisque elementum mauris non aliquam. Nulla facilisi. Suspendisse potenti. Vivamus augue dui, feugiat in lacus et, vehicula tristique ligula.</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>

Answer 2

It looks like this solution should solve your issue

body {
  padding: 20px;
}

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

.touch {
  -webkit-overflow-scrolling: touch;
}


<div class="touch">
<h3>Smooth</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla justo at turpis tincidunt vulputate. Aliquam erat volutpat. Sed scelerisque elementum mauris non aliquam. Nulla facilisi. Suspendisse potenti. Vivamus augue dui, feugiat in lacus et, vehicula tristique ligula.</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>

Answer 3

Answer №2

This piece of code showcases the default functionality of Bootstrap 4. For more details, you can refer to the official documentation here.

If you want to customize and enable scrolling on the modal-body, you will need to apply some custom CSS.

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

In the code snippet above, I have used CSS properties like overflow and max-height for the modal-body element. Additionally, I utilized the calc property within the max-height to adjust for elements like modal-header, modal-footer, and margins within the modal-body.

You can find a working example with this implementation in the provided code snippet. You can also view a live demo on CodePen Example. Feel free to give it a try! Hope this information proves helpful. Thank you!

Answer 4

This piece of code showcases the default functionality of Bootstrap 4. For more details, you can refer to the official documentation here.

If you want to customize and enable scrolling on the modal-body, you will need to apply some custom CSS.

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

In the code snippet above, I have used CSS properties like overflow and max-height for the modal-body element. Additionally, I utilized the calc property within the max-height to adjust for elements like modal-header, modal-footer, and margins within the modal-body.

You can find a working example with this implementation in the provided code snippet. You can also view a live demo on CodePen Example. Feel free to give it a try! Hope this information proves helpful. Thank you!

Answer 5

Answer №3

In case you want to prevent the header and footer of a modal from scrolling, you can utilize the built-in modal-dialog-scrollable class within Bootstrap 4.

The following code snippet demonstrates how to implement this feature:

<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>
          Content of the modal goes here...
          <br>
          <strong>Last Text</strong>
        </p>
      </div>
    </div>
  </div>
</div>

Answer 6

In case you want to prevent the header and footer of a modal from scrolling, you can utilize the built-in modal-dialog-scrollable class within Bootstrap 4.

The following code snippet demonstrates how to implement this feature:

<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>
          Content of the modal goes here...
          <br>
          <strong>Last Text</strong>
        </p>
      </div>
    </div>
  </div>
</div>

Answer 7

Answer №4

To properly display the content in a modal, you need to adjust the height of the .modal-body and set overflow-y to auto. Additionally, reset the overflow value for .modal-dialog to initial.

.

Here's an example:

.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">Example Title</h3> 
            </div> 
            <div class="modal-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</div> 
            <div class="modal-footer">Footer Content</div> 
        </div> 
    </div> 
</div>

Answer 8

To properly display the content in a modal, you need to adjust the height of the .modal-body and set overflow-y to auto. Additionally, reset the overflow value for .modal-dialog to initial.

.

Here's an example:

.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">Example Title</h3> 
            </div> 
            <div class="modal-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</div> 
            <div class="modal-footer">Footer Content</div> 
        </div> 
    </div> 
</div>

Keeping the scroll in place on a Bootstrap4 modal while scrolling through content that is already at the top

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Troubleshooting overlap problem between Skrollr and SlickNav

Launch target _blank within a modal instead of a new tab

Deleting an element from a reference array in Mongoose

Leveraging the power of JavaScript Math methods to dictate the Co-ordinates of HTML Canvas .fillRect

The new version 5.1 of Bootstrap modal does not disable scrolling on the <body> element

Is there a way to invoke a different function within a class from a callback function in an HTTP request?

Retrieve the Javascript variable and assign it to a PHP variable

Upon reloading, the dynamically generated table does not appear accurately

Combining various types of data into a single dataframe

Placing text alongside an image at the top of the page

fixing errors with express, angularJS, and socket.io

Deactivate the dependent picklist functionality on a Visualforce page

Encountered a problem while initiating the HTTP server in a node.js

Slow rotation in CSS styling

Issue with Angular App: Bootstrap navbar not displaying on smaller screens

What is the best way to compare two strings without considering their capitalization?

Does IE 9 support endless local storage capacity?

Obtaining a button from a dialog in Google Apps

Using AngularJS to bind radio buttons to ng-model

What is causing the data in the hierarchy table to be invisible?