Double Scrollbar on long pages

[emage]

trafficstars

With the CSS:

html {overflow: y-scroll}

the modal cause browsers with long pages to have a double scrollbars.

[janjaap]

It happens whenever a modal window is opened on a page that has content that is higher than the height of the viewport or, in my case, on a page that has the overflow property set to scroll-y on the html or the body element.

A solution could be to set an extra class on the html element, like modal-long. This way the scrolling can be disabled on the html element with css (or any lower element that has visible vertical overflow and causes the content to be scrollable).

[marcusg]

any updates here? I have the same problem and it's very ugly.

[jschr]

Try putting overflow-y: scroll on body instead. See https://github.com/jschr/bootstrap-modal/issues/147

[janjaap]

This doesn't work if you have content that is positioned 'fixed', because the overflow-y: scroll; on the body element causes the scrollbar to overlap the fixed content.

[jschr]

Can you provide an example of the problem? Preferably in a jsFiddle or something similar. I currently use the technique mentioned in https://github.com/jschr/bootstrap-modal/issues/147 in my app with navbar-fixed without any problems.

[tomyam1]

This actually solved it for me

body,
.modal-open .page-container,
.modal-open .page-container .navbar-fixed-top,
.modal-open .modal-container {
    overflow-y: scroll;
}
.modal-scrollable {
    direction: ltr;
}

And on RTL pages, I add:

.modal-header,
.modal-body,
.modal-footer {
    direction: rtl;
}

I really have no idea why, but setting the direction to LTR did the trick for me.

[naberly]

We are using bootstrap-modal in a plugin for Wordpress. Many times the theme has a class: html {overflow-y: scroll;} which causes double scroll bars.

I added a class in my plugin: html {overflow-y: visible !important;}

It seems to be working, but just wondering if this is too hacky and will cause issues down the road?

[jschr]

You can try setting the default manager to be html rather then body via js:

$.fn.modal.defaults.manager = 'html';

I haven't really tested changing the default manager and some users have reported problems: https://github.com/jschr/bootstrap-modal/issues/102

[naberly]

Just implemented and seems to be working. Thank you very much.

[jarc100]

This worked for me:

body.modal-open {
    overflow-y: hidden;
}

[tbela99]

removing

html { overflow-y: scroll; }

or changing it to

html { overflow-y: visible; }

actually slove the issue

[walky-toki]

Just add to your css

body.modal-open{overflow:hidden!important;} /optional/ .modal-open, .modal{padding-right:0!important}

[wqsaali]

just add this script if your bootstrap model have double scroll this is the case if your css have html tag styling $(function(){ $(document.body).on('show.bs.modal', function () { $(window.document).find('html').addClass('modal-open'); }); $(document.body).on('hide.bs.modal', function () { $(window.document).find('html').removeClass('modal-open'); }); }); this is the case if your css doesn't have html tag styling $(function(){ $(document.body).on('show.bs.modal', function () { $(document.body).addClass('modal-open'); }); $(document.body).on('hide.bs.modal', function () { $(document.body).removeClass('modal-open'); }); });

[matbrgz]

same error here

[WebNaresh]

I got same when dealing with bootstrap just add style with component directly <InfiniteScroll style={{ overflow: "hidden"}} dataLength={this.state.articles.length} next={this.fetchMoreData} hasMore={this.state.articles.length !== this.state.totalResults} loader={<Spinner />} > in my case InfiniteScroll making this isuue so I change his style its woked

[orlandoxxx-sudo]

i"m new to coding, I'm having a double vertical scroll bar issue, I don't even know where to begin, I don't know where to remove overflow, nor do i know how to locate the css thingy, please I need help it's really frustrating

[WebNaresh]

i"m new to coding, I'm having a double vertical scroll bar issue, I don't even know where to begin, I don't know where to remove overflow, nor do i know how to locate the css thingy, please I need help it's really frustrating

just inspect and in css select div which you think having a scroll bar write property in css overflow:"hidden" in inspect you will get autocomplete if scrollbar is hidden or not showing and ui working properly then this div is culprit then in code overflow :hidden him ok if you want any help you can text