Remove vertical scrollbar in bootstrap modal popup

Question

I have a bootstrap modal popup on my page. The popup is a bit long so html adds the vertical scroll bar which doesn't look so good with the animation effect.

So, I want to remove this scroll bar but still be able to scroll.

Any help?

Browser compatible answer: https://stackoverflow.com/a/47807685/7186739 — Billu, Jun 06 '20 at 10:30

score 3 · Accepted Answer · answered Dec 27 '17 at 10:54

3

It may help you. Fixing the overflow hidden will remove the scrollbar, To get full content within the page use overflow auto to modal body

CSS:

  .modal{
    overflow:hidden;
    }
    .modal-body{
    overflow:auto;
    }

answered Dec 27 '17 at 10:54

pradeep kumar

983
10
21

score 1 · Answer 2 · answered Sep 26 '19 at 08:30

1

If you are using bootstrap version 4. You can use this css code.

.modal-scrollbar-measure {
overflow: hidden !Important; }

answered Sep 26 '19 at 08:30

Rehan Hilal

76
6

score 0 · Answer 3 · answered Dec 27 '17 at 10:54

0

.modal class has overflow-y: scroll rule which results in scrollbar always visible. https://stackoverflow.com/a/18715220/9143855

answered Dec 27 '17 at 10:54

score 0 · Answer 4 · answered Dec 27 '17 at 11:16

0

that because you use overflow : scroll ; the scroll value of overflow property add scroll ball line to both sides vertically and horizontally you should use instead overflow auto which will just add one side scroll for which it needed the most

answered Dec 27 '17 at 11:16

adil khan

11
4

score 0 · Answer 5 · answered Apr 10 '20 at 12:53

You can also use the modal events for this:

$("#modalID").on('shown.bs.modal', function(){
    /* Hide the body scrollbar. */
    document.body.style.overflow = "hidden";
});

$("#modalID").on('hidden.bs.modal', function(){
    /* Show the body scrollbar. */
    document.body.style.overflow = "auto";
});

the events can be seen here: https://mdbootstrap.com/docs/jquery/modals/events/

Remove vertical scrollbar in bootstrap modal popup

5 Answers5