What is the best way to conceal just the scrollbar thumb in a Bootstrap modal?

When opening a modal in Bootstrap according to the documentation, it only hides the scrollbar thumb, like shown in the examples below:

However, my modal hides the entire scrollbar. How can I modify it to hide only the scrollbar thumb?

body {
  height: 1200px;
}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1" crossorigin="anonymous">
</head>

<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <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>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

jquerycsstwitter-bootstrapbootstrap-4bootstrap-modal

Answer №1

In the demo, you can already see that it is working. If you inspect it closely, you'll notice that there is a padding-right: 17px in the body when the modal opens.

The purpose of the modal is to hide the overflow, preventing any scrollbar from appearing, and adding a right padding of 17px (the width of the scrollbar).

A clever trick on the Bootstrap website is that there appears to be another scrollbar on the right side. However, in reality, there is no thumb or scrollbar at all—just the padding-right.

There are some workarounds available by adding a bar positioned similarly to the scrollbar when the modal is opened. This can be achieved using jQuery and events provided by the Bootstrap modal. (Check out the link) 

$("#exampleModalCenter").on("show.bs.modal", function() {
  $(".scroll").addClass("show")
});
$("#exampleModalCenter").on("hidden.bs.modal", function() {
  $(".scroll").removeClass("show")
});
body {
  position: relative;
  height: 1200px
}
.scroll {
display: none;
}
.scroll.show { 
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 17px;
background-color: #f1f1f1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>
<div class="scroll"></div>


<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <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>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for adjusting the color using inline CSS

Currently, I have a div styled with blue color using CSS. However, I now require the ability to dynamically change this color. My plan is to retrieve the desired color from a database and use its hexadecimal code in place of the default blue. What is the ...

htmlcss

Using JavaScript's AJAX to create conditional statements with the if-

Below is my JavaScript code that is meant to display a notification to the user if the PHP script below returns a MySQL select count result greater than 0: <script> $(document).ready(function() { function update() { ...

javascriptphpjquerymysqlajax

Pictures do not adhere to the maximum width set on their parent elements

When the max-width CSS style is set on the body tag and an image within the body surpasses this maximum width, the image does not adhere to the set limit. Instead of resizing, it simply overflows. Why does this happen? So, what is the solution to this pro ...

htmlcss

Issue with sidebar lazy loading: something minor is causing it to not function as expected

There's a tiny detail slipping through my fingers here... I can't seem to make lazyload work on the sidebar located on the right. Any ideas? here is where you can find it: APM v2 Your help is greatly appreciated. ...

jquerylazy-loading

An issue with jQuery's :not selector and hash symbol syntax

I encountered a syntax error that is quite charming. It appears when attempting to select all anchor tags without an href attribute containing a placeholder URL, such as href="#". Here are the attempts I have made: $("a:not(href='#')"); // cha ...

javascriptjqueryjquery-selectors

Ensuring the script waits for the complete loading of iframe prior to

I'm faced with an issue on the website I'm currently working on. There's a Live Chat plugin integrated on an iframe, and I need to change an image if no agents are available. Interestingly, my code works perfectly fine when tested on the con ...

javascriptjqueryiframe

The requested TYPO3 eID for ajax functionality could not be found and returned a

I am using TYPO3 version 7.6.18 and attempting to set up ajax requests on the front end. I need the ajax request to call a specific plugin controller and action. I have tried different AjaxDispatchers, but now I am encountering a 404 error stating "eID not ...

phpjqueryajaxtypo3

I'm wondering why my positive numbers aren't displayed in green and negative numbers in red

I am currently working on a commodities quotes widget. I have already set up the 'Current' and '24-hour' divs, but I'm facing an issue where positive values are not displaying in green and negatives in red as intended. I have check ...

javascriptjqueryhtmlcssjson

Adjustable width (100%) and set height for SVG

I am attempting to insert an SVG object onto my HTML page with a width of 100% and a fixed height. Upon viewing my fiddle, you will notice that the height of the dark-grey object changes based on the window proportions, which is not the desired outcome. ...

htmlcsssvg

Forwarding HTTP POST requests containing JSON data

We are facing some CORS issues and have decided to implement server proxying as a workaround. However, we are encountering major difficulties with POST requests in this setup. The structure of the proxy is as follows: JQuery-based client -> WebServer H ...

jqueryasp.net-mvcjsonproxycors

Unable to adjust custom link menu font size

I have designed a unique custom menu called SANDUSKY with the css classes of no-hover. It is positioned alongside HOME, ABOUT, GALLERY, STORE, CONTACT which serve as the navigation menus. While attempting to customize SANDUSKY, I successfully altered the c ...

css

Generate an interactive rain accumulation graph by combining multiple data points of rainfall into a dynamic Highcharts chart

I am looking to create a highchart that displays rain data along with the accumulated rain for the visible data points in the chart (where the accumulated rain series will always remain at 0), similar to this example image: https://i.sstatic.net/25OD1.png ...

jqueryjsonhighchartsresponsiveseries

What is the reason for the website allowing me to scroll towards the right?

I'm encountering a strange issue with my code that I can't seem to figure out. The website keeps letting me scroll to the right as if there's an image or something off-screen, even though there isn't anything there. Any idea why this is ...

htmlcss

Unable to close modal after receiving ajax response

Utilizing mdbootstrap for my current project has been a great experience. One area that I am struggling with is implementing an AJAX call upon checking a checkbox, where I expect a response from PHP indicating success (1) or failure (0). However, despite d ...

phpjqueryajaxmdbootstrap

Menu options arranged vertically, revealing submenus that fly out upon mouse hover

I am attempting to develop a vertical menu with flyouts, which includes sub-menus. Can you point out any issues in the code provided below? <html> <head> <title>Untitled Document</title> <style type="text/css ...

htmlcsssubmenu

Swapping out HTML inside the appropriate div using jQuery

My PHP script generates multiple divs using a loop. Here is an example of what it looks like: <div class="link_0"><a href=# onclick="getLink('20120922','0');">Get Link</a></div> <div class="link_1"><a h ...

jquery

Struggle with the background div menu

I am trying to create a menu with a background color, but when I use "background" or "background-color" on the div that contains my menu, I can't see any color. It's frustrating because I know it should be working.. Here is the HTML : <head ...

htmlcssmenubackgroundjsfiddle

Using JQuery or JavaScript to retrieve the HTTP header information of a specified URL

Hey there! I was wondering if it's possible to retrieve the HTTP Header information for a URL using JavaScript? The URL mentioned above points to the current page, but I'm interested in fetching the header details for any given URL (such as ) C ...

javascriptjquery

Revisiting the Issue: Jquery Hover Effect Fails to Function in Internet Explorer

Can anyone provide assistance with this issue? The code snippet works perfectly in all browsers except for IE, where the menu does not fade in and looks unattractive. html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

javascriptjqueryhtmlcss

Remove the javascript file once the modal dialog has been closed

One of the challenges I'm facing is with a modal dialog that has been customized to appear on the right side of the customer's browser. Depending on the icon clicked in the navigation bar, an ajax call is made and an HTML fragment is loaded into ...

jqueryajaxbootstrap-5