0

I have this website where I got different modals. In these modals you can scroll but when you are at the end of the modal content the page is scrolling. So my first solution I came up with is:

$('.btn-open-modal').click(function(e) {
    e.preventDefault();
    $('body').css('overflow', 'hidden');
});

$('.btn-close-modal').click(function(e) {
    e.preventDefault();
    $('body').css('overflow', 'auto');
});

Are there any better solutions because I heard that this solution can cause trouble because the page will become a bit wider when the scroll bar is hidden.

KSHMR
  • 55
  • 2
  • 9
  • Hiding/showing the scroll bar when the overflow property is set depends on what OS you're using, generally. On Mac the scrollbar is overlaid on the page and fades in/out as you use it so it doesn't have this problem. Windows functions as you describe and will widen the window by about 20px – Our_Benefactors Jun 07 '17 at 12:52
  • Everything you need to know along with a working example in this answer: https://stackoverflow.com/a/9280412/4108884 – Samuil Petrov Jun 07 '17 at 12:54

0 Answers0