432

I want my body to stop scrolling when using the mousewheel while the Modal (from http://twitter.github.com/bootstrap) on my website is opened.

I've tried to call the piece of javascript below when the modal is opened but without success

$(window).scroll(function() { return false; });

AND

$(window).live('scroll', function() { return false; });

Please note our website dropped support for IE6, IE7+ needs to be compatible though.

0

52 Answers 52

536

Bootstrap's modal automatically adds the class modal-open to the body when a modal dialog is shown and removes it when the dialog is hidden. You can therefore add the following to your CSS:

body.modal-open {
    overflow: hidden;
}

You could argue that the code above belongs to the Bootstrap CSS code base, but this is an easy fix to add it to your site.

Update 8th feb, 2013
This has now stopped working in Twitter Bootstrap v. 2.3.0 -- they no longer add the modal-open class to the body.

A workaround would be to add the class to the body when the modal is about to be shown, and remove it when the modal is closed:

$("#myModal").on("show", function () {
  $("body").addClass("modal-open");
}).on("hidden", function () {
  $("body").removeClass("modal-open")
});

Update 11th march, 2013 Looks like the modal-open class will return in Bootstrap 3.0, explicitly for the purpose of preventing the scroll:

Reintroduces .modal-open on the body (so we can nuke the scroll there)

See this: https://github.com/twitter/bootstrap/pull/6342 - look at the Modal section.

20
  • 3
    this does not work anymore in bootstrap 2.2.2. Hopefully .modal-open will come back in the future... github.com/twitter/bootstrap/issues/5719
    – ppetrid
    Dec 19, 2012 at 22:30
  • 3
    @ppetrid I don't expect it to return. Based on this writing: github.com/twitter/bootstrap/wiki/Upcoming-3.0-changes (look at the bottom). Quote: "No more inner modal scrolling. Instead, modals will grow to house their content and the page scroll to house the modal."
    – MartinHN
    Dec 20, 2012 at 10:25
  • 3
    @Bagata Cool - the modal-open will return in Bootstrap 3, so when that launches it should be safe to remove the above code.
    – MartinHN
    May 15, 2013 at 9:35
  • 3
    This is why one should keep scrolling down, if the chosen answer doesn't satisfy you, there are chances that you are gonna find gems like these. didnt expect a 97+ voted answer burried so deep under other less liked comments. Jan 23, 2014 at 10:31
  • 6
    the problem with this is that to prevent the document from scrolling to the top when a modal is opened you needed to add body.modal-open{overflow:visible}. Your solution works at the moment, with the downside that the document scrolls to the top once a modal is openen
    – patrick
    Sep 17, 2015 at 22:07
142

The accepted answer doesn't work on mobile (iOS 7 w/ Safari 7, at least) and I don't want MOAR JavaScript running on my site when CSS will do.

This CSS will prevent the background page from scrolling under the modal:

body.modal-open {
    overflow: hidden;
    position: fixed;
}

However, it also has a slight side-affect of essentially scrolling to the top. position:absolute resolves this but, re-introduces the ability to scroll on mobile.

If you know your viewport (my plugin for adding viewport to the <body>) you can just add a css toggle for the position.

body.modal-open {
    /* block scroll for mobile; */
    /* causes underlying page to jump to top; */
    /* prevents scrolling on all screens */
    overflow: hidden;
    position: fixed;
}
body.viewport-lg {
    /* block scroll for desktop; */
    /* will not jump to top; */
    /* will not prevent scroll on mobile */
    position: absolute; 
}

I also add this to prevent the underlying page from jumping left/right when showing/hiding modals.

body {
    /* STOP MOVING AROUND! */
    overflow-x: hidden;
    overflow-y: scroll !important;
}

this answer is a x-post.

5
  • 9
    Thanks! Mobiles (at least iOS and Android native browser) were giving me a headache and wouldn't work without the position: fixed on the body.
    – Raul Rene
    Aug 19, 2014 at 13:59
  • Thanks for also including the code for preventing the page from jumping left/right when showing/hiding modals. This was extremely useful and I verified it fixes an issue I was having on Safari on an iPhone 5c running iOS 9.2.1. Feb 4, 2016 at 17:04
  • 10
    In order to fix scrolling to top, you can record position before adding the class, then after class is removed, do window.scroll to recorded position. This is how I fixed it for myself: pastebin.com/Vpsz07zd.
    – Tool
    Aug 25, 2016 at 9:15
  • Though I feel this would only fit very basic needs, it was a useful fix. Thanks. May 10, 2019 at 8:24
  • Here's how I did it to retain the scroll position with jquery: js const currPageScrollPos = $(window).scrollTop() $("body").removeClass("show_overlay") $(window).delay(5).scrollTop(currPageScrollPos) Aug 29, 2021 at 10:19
39

Simply hide the body overflow and it makes body not scrolling. When you hide the modal, revert it to automatic.

Here is the code:

$('#adminModal').modal().on('shown', function(){
    $('body').css('overflow', 'hidden');
}).on('hidden', function(){
    $('body').css('overflow', 'auto');
})
0
25

You need to go beyond @charlietfl's answer and account for scrollbars, otherwise you may see a document reflow.

Opening the modal:

  1. Record the body width
  2. Set body overflow to hidden
  3. Explicitly set the body width to what it was in step 1.

    var $body = $(document.body);
    var oldWidth = $body.innerWidth();
    $body.css("overflow", "hidden");
    $body.width(oldWidth);
    

Closing the modal:

  1. Set body overflow to auto
  2. Set body width to auto

    var $body = $(document.body);
    $body.css("overflow", "auto");
    $body.width("auto");
    

Inspired by: http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php

5
  • I was getting a "jumpy" screen for lack of a better term and the key here for me was following the width settings. Thanks a ton.
    – Hcabnettek
    Sep 5, 2013 at 17:09
  • 3
    @Hcabnettek Yep: "jumpy" == "document reflow". Glad it helped you! :-)
    – jpap
    Sep 6, 2013 at 7:36
  • is there a css solution for this? does it work in all browsers and mobile?
    – Ruben
    Aug 20, 2014 at 9:45
  • just a typo: It must be $body.css("overflow", "auto"); in the last step :)
    – schneikai
    May 31, 2015 at 12:05
  • Oh man, what an marvelous idea. @jpap you helped me resolve the document reflow issue that was bugging me for a long time. Jan 20, 2016 at 22:39
21

You could try setting body size to window size with overflow: hidden when modal is open

7
  • 13
    doing so would move the screen every time the modal is opened, that is not convenient, I just need to disable the background scroll
    – xorinzor
    Mar 2, 2012 at 19:12
  • not sure that you can scrollbars are browser related and you can't do much with them
    – charlietfl
    Mar 2, 2012 at 19:14
  • you could set modal to "fixed" so won't move when scrolling
    – charlietfl
    Mar 2, 2012 at 19:16
  • 9
    its not about stopping the modal from scrolling, its about stopping the body in the background from scrolling
    – xorinzor
    Mar 2, 2012 at 20:22
  • 1
    it's the window that scrolls if body overflows it. For example the scrollbars are not part of document.
    – charlietfl
    Mar 2, 2012 at 20:33
18

Warning: The option below is not relevant to Bootstrap v3.0.x, as scrolling in those versions has been explicitly confined to the modal itself. If you disable wheel events you may inadvertently prevent some users from viewing the content in modals that have heights greater than the viewport height.


Yet Another Option: Wheel Events

The scroll event is not cancelable. However it is possible to cancel the mousewheel and wheel events. The big caveat is that not all legacy browsers support them, Mozilla only recently adding support for the latter in Gecko 17.0. I don't know the full spread, but IE6+ and Chrome do support them.

Here's how to leverage them:

$('#myModal')
  .on('shown', function () {
    $('body').on('wheel.modal mousewheel.modal', function () {
      return false;
    });
  })
  .on('hidden', function () {
    $('body').off('wheel.modal mousewheel.modal');
  });

JSFiddle

5
  • Your JSFiddle doesn't work on Firefox 24, Chrome 24 nor on IE9.
    – AxeEffect
    Sep 30, 2013 at 15:07
  • @AxeEffect should be working now. The only issue was that the external references to the Bootstrap library had changed. Thanks for the heads up.
    – merv
    Sep 30, 2013 at 21:52
  • 3
    This doesn't prevent touch devices from scrolling, the overflow:hidden is better for now.
    – Positivity
    Jul 3, 2014 at 20:41
  • 5
    they are all working but not for mobile devices. -__- Tested Android 4.1 and Chrome Jun 2, 2015 at 13:49
  • @TowerJimmy you probably need to cancel out the touch or drag events for that (if that's even possible)
    – xorinzor
    Jan 26, 2017 at 15:32
11

Try this one:

.modal-open {
    overflow: hidden;
    position:fixed;
    width: 100%;
    height: 100%;
}

it worked for me. (supports IE8)

1
  • 9
    This works but also causes you to jump to the top when you open a modal when using position: fixed.
    – AlexioVay
    Dec 17, 2016 at 13:37
10

As of November 2017 Chrome Introduced a new css property

overscroll-behavior: contain;

which solves this problem although as of writing has limited cross browser support.

see below links for full details and browser support

3
  • Even in 2020 caniuse puts support of this at only 78%. Hardly a viable solution. Nov 18, 2020 at 4:28
  • 2
    In 2022 it seems to get better: caniuse.com/?search=overscroll-behavior
    – Avatar
    Jun 24, 2022 at 9:31
  • 1
    Works good on desktop. Caveats I've noticed (2022 Dec 7). Doesn't work on desktop. Doesn't work for non-scroll-able divs (think divs with overflow-y:auto which may or may not be scroll-able at any given point Dec 8, 2022 at 2:18
9
/* =============================
 * Disable / Enable Page Scroll
 * when Bootstrap Modals are
 * shown / hidden
 * ============================= */

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}

function theMouseWheel(e) {
  preventDefault(e);
}

function disable_scroll() {
  if (window.addEventListener) {
      window.addEventListener('DOMMouseScroll', theMouseWheel, false);
  }
  window.onmousewheel = document.onmousewheel = theMouseWheel;
}

function enable_scroll() {
    if (window.removeEventListener) {
        window.removeEventListener('DOMMouseScroll', theMouseWheel, false);
    }
    window.onmousewheel = document.onmousewheel = null;  
}

$(function () {
  // disable page scrolling when modal is shown
  $(".modal").on('show', function () { disable_scroll(); });
  // enable page scrolling when modal is hidden
  $(".modal").on('hide', function () { enable_scroll(); });
});
0
9

Couldn't make it work on Chrome just by changing CSS, because I didn't want the page to scroll back to the top. This worked fine:

$("#myModal").on("show.bs.modal", function () {
  var top = $("body").scrollTop(); $("body").css('position','fixed').css('overflow','hidden').css('top',-top).css('width','100%').css('height',top+5000);
}).on("hide.bs.modal", function () {
  var top = $("body").position().top; $("body").css('position','relative').css('overflow','auto').css('top',0).scrollTop(-top);
});
3
  • 1
    this is the only solution that worked for me on bootstrap 3.2.
    – volx757
    Feb 9, 2016 at 20:06
  • 1
    Had the jump to top issue with angular-material sidenavs. This was the only answer that seems to work in all cases (desktop/mobile + allow scroll in the modal/sidenav + leave the body scroll position fixed without jumping). Sep 19, 2017 at 8:52
  • This is also only solution that actually worked for me. tx
    – Deedz
    Dec 12, 2018 at 13:11
9

Adding the class 'is-modal-open' or modifying style of body tag with javascript is okay and it will work as supposed to. But the problem we gonna face is when the body becomes overflow:hidden, it will jump to the top, ( scrollTop will become 0 ). This will become a usability issue later.

As a solution for this problem, instead of changing body tag overflow:hidden change it on html tag

$('#myModal').on('shown.bs.modal', function () {
  $('html').css('overflow','hidden');
}).on('hidden.bs.modal', function() {
  $('html').css('overflow','auto');
});
1
  • 1
    This is absolutely the correct answer because the general consensus answer scrolls the page to the top which is a horrible user experience. You should write a blog on this. I ended up turning this into a global solution.
    – Smith
    Jan 12, 2017 at 19:58
8

For Bootstrap, you might try this (working on Firefox, Chrome and Microsoft Edge) :

body.modal-open {
    overflow: hidden;
    position:fixed;
    width: 100%;
}
0
6

React , if you are looking for

useEffect in the modal that is getting popedup

 useEffect(() => {
    document.body.style.overflowY = 'hidden';
    return () =>{
      document.body.style.overflowY = 'auto';
    }
  }, [])
6

It's 2022, and there are better CSS solutions now. This works well. You can add this class to the body element, or modify the body style itself, when the modal is open.

  .body-no-scroll {
    height: 100vh;
    width: 100vw;
    touch-action: none;
    -webkit-overflow-scrolling: none;
    overflow: hidden;
    overscroll-behavior: none;
  }
1
  • This answer definitely needs more upvotes. Can confirm it works well. Nov 24, 2022 at 9:26
5

I'm not sure about this code, but it's worth a shot.

In jQuery:

$(document).ready(function() {
    $(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
        $("#Modal").css("overflow", "hidden");
    });
});

As I said before, I'm not 100% sure but try anyway.

4
  • 3
    This doesn't prevents the body from scrolling while the modal is opened
    – xorinzor
    Mar 2, 2012 at 20:20
  • @xorinzor you stated in the comments section of charlietfl's answer that this works. But you said: This doesn't prevents the body from scrolling while the modal is opened. Mar 24, 2012 at 15:13
  • true but for now its the only solution that partly works and I'm fine with. the reason why I marked his response as answer is because he was earlier with the answer.
    – xorinzor
    Apr 4, 2012 at 8:52
  • @xorinzor really, i thought i answered before him/her , might be some weird glitch. its fine though Apr 4, 2012 at 11:00
5

I'm not 100% sure this will work with Bootstrap but worth a try - it worked with Remodal.js which can be found on github: http://vodkabears.github.io/remodal/ and it would make sense for the methods to be pretty similar.

To stop the page jumping to the top and also prevent the right shift of content add a class to the body when the modal is fired and set these CSS rules:

body.with-modal {
    position: static;
    height: auto;
    overflow-y: hidden;
}

It's the position:static and the height:auto that combine to stop the jumping of content to the right. The overflow-y:hidden; stops the page from being scrollable behind the modal.

0
3

The best solution is the css-only body{overflow:hidden} solution used by most of these answers. Some answers provide a fix that also prevent the "jump" caused by the disappearing scrollbar; however, none were too elegant. So, I wrote these two functions, and they seem to work pretty well.

var $body = $(window.document.body);

function bodyFreezeScroll() {
    var bodyWidth = $body.innerWidth();
    $body.css('overflow', 'hidden');
    $body.css('marginRight', ($body.css('marginRight') ? '+=' : '') + ($body.innerWidth() - bodyWidth))
}

function bodyUnfreezeScroll() {
    var bodyWidth = $body.innerWidth();
    $body.css('marginRight', '-=' + (bodyWidth - $body.innerWidth()))
    $body.css('overflow', 'auto');
}

Check out this jsFiddle to see it in use.

5
  • This is not so old but none of this is working at all for me not even the fiddle I can still scroll the window, what am I missing ?
    – landed
    Mar 14, 2014 at 11:14
  • Open and Close the modal a few times, and the main green DIV shrinks and shrinks!
    – Positivity
    Jul 3, 2014 at 20:32
  • @Webinan I'm not seeing this in Chrome on Win7. What's your browser and viewport size? Aug 3, 2014 at 23:56
  • 1
    @smhmic after about 20 times of open and close the green div's width becomes equal to the open modal buttons' width. Chrome on 8
    – Positivity
    Aug 5, 2014 at 23:12
  • Similar to @jpap's answer (stackoverflow.com/a/16451821/5516499) but with added bugs. :-( May 12, 2017 at 16:08
3

Many suggest "overflow: hidden" on the body, which will not work (not in my case at least), since it will make the website scroll to the top.

This is the solution that works for me (both on mobile phones and computers), using jQuery:

    $('.yourModalDiv').bind('mouseenter touchstart', function(e) {
        var current = $(window).scrollTop();
        $(window).scroll(function(event) {
            $(window).scrollTop(current);
        });
    });
    $('.yourModalDiv').bind('mouseleave touchend', function(e) {
        $(window).off('scroll');
    });

This will make the scrolling of the modal to work, and prevent the website from scrolling at the same time.

1
3

I had to set the viewport-height to get this working perfectly

body.modal-open {
  height: 100vh;
  overflow: hidden;
}
2

You could use the following logic, I tested it and it works(even in IE)

   <html>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">

var currentScroll=0;
function lockscroll(){
    $(window).scrollTop(currentScroll);
}


$(function(){

        $('#locker').click(function(){
            currentScroll=$(window).scrollTop();
            $(window).bind('scroll',lockscroll);

        })  


        $('#unlocker').click(function(){
            currentScroll=$(window).scrollTop();
            $(window).unbind('scroll');

        })
})

</script>

<div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<button id="locker">lock</button>
<button id="unlocker">unlock</button>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>
2

Based on this fiddle: http://jsfiddle.net/dh834zgw/1/

the following snippet (using jquery) will disable the window scroll:

 var curScrollTop = $(window).scrollTop();
 $('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');

And in your css:

html.noscroll{
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    height: 100%;
    overflow-y: scroll !important;
    z-index: 10;
 }

Now when you remove the modal, don't forget to remove the noscroll class on the html tag:

$('html').toggleClass('noscroll');
1
  • Shouldn't the overflow be set to hidden? +1 though as this worked for me (using hidden).
    – mhulse
    Jun 7, 2016 at 17:00
2

Sadly none of the answers above fixed my issues.

In my situation, the web page originally has a scroll bar. Whenever I click the modal, the scroll bar won't disappear and the header will move to right a bit.

Then I tried to add .modal-open{overflow:auto;} (which most people recommended). It indeed fixed the issues: the scroll bar appears after I open the modal. However, another side effect comes out which is that "background below the header will move to the left a bit, together with another long bar behind the modal"

Long bar behind modal

Luckily, after I add {padding-right: 0 !important;}, everything is fixed perfectly. Both the header and body background didn't move and the modal still keeps the scrollbar.

Fixed image

Hope this can help those who are still stuck with this issue. Good luck!

2

This solution worked for me:

var scrollDistance = 0;
$(document).on("show.bs.modal", ".modal", function () {
    scrollDistance = $(window).scrollTop();
    $("body").css("top", scrollDistance * -1);
});

$(document).on("hidden.bs.modal", ".modal", function () {
    $("body").css("top", "");
    $(window).scrollTop(scrollDistance);
});
.content-area {
  height: 750px;
  background: grey;
  text-align: center;
  padding: 25px;
  font-weight:700;
  font-size: 30px;
}

body.modal-open {
  position: fixed;
  left: 0;
  width: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>

<div class="content-area">
   Scroll Down To Modal Button<br/>
   <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" fill="currentColor" class="bi bi-arrow-down" viewBox="0 0 16 16">
      <path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"/>
   </svg>
</div>

<center class="my-3">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
  </button>
</center>


<div class="content-area"></div>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">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>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
      </div>
      <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>

Basically when the modal is opened it will add a negative top for the body to maintain the window scroll position before opening the modal. When closing the modal the window scroll is kept using the same value applied for the top when opening. This approach prevents body scroll.

Here is a working fiddle

1

This worked for me:

$("#mymodal").mouseenter(function(){
   $("body").css("overflow", "hidden"); 
}).mouseleave(function(){
   $("body").css("overflow", "visible");
});
1
  • Of all the above answers, this is the first and only one that worked for me. Dec 28, 2020 at 4:00
1

Most of the pieces are here, but I don't see any answer that puts it all together.

The problem is threefold.

(1) prevent the scroll of the underlying page

$('body').css('overflow', 'hidden')

(2) and remove the scroll bar

var handler = function (e) { e.preventDefault() }
$('.modal').bind('mousewheel touchmove', handler)

(3) clean up when the modal is dismissed

$('.modal').unbind('mousewheel touchmove', handler)
$('body').css('overflow', '')

If the modal is not full-screen then apply the .modal bindings to a full screen overlay.

3
  • 4
    This also prevents scrolling within the modal.
    – Daniel
    Dec 11, 2016 at 13:30
  • Same problem. Did you find a solution? @Daniel
    – AlexioVay
    Dec 17, 2016 at 13:49
  • @Vay Sort of. Check this out: blog.christoffer.me/…
    – Daniel
    Dec 18, 2016 at 15:32
1

My solution for Bootstrap 3:

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

because for me the only overflow: hidden on the body.modal-open class did not prevent the page from shifting to the left due to the original margin-right: 15px.

1

I just done it this way ...

$('body').css('overflow', 'hidden');

But when the scroller dissapeared it moved everything right 20px, so i added

$('body').css('margin-right', '20px');

straight after it.

Works for me.

1
  • This only works if the modal is smaller than the screen size.
    – Sergey
    Oct 21, 2015 at 19:50
1

If modal are 100% height/width "mouseenter/leave" will work to easily enable/disable scrolling. This really worked out for me:

var currentScroll=0;
function lockscroll(){
    $(window).scrollTop(currentScroll);
} 
$("#myModal").mouseenter(function(){
    currentScroll=$(window).scrollTop();
    $(window).bind('scroll',lockscroll); 
}).mouseleave(function(){
    currentScroll=$(window).scrollTop();
    $(window).unbind('scroll',lockscroll); 
});
1

I had a sidebar that was generated by checkbox hack. But the main idea is to save the document scrollTop and not to change it during scrolling the window.

I just didn't like the page jumping when body becomes 'overflow: hidden'.

window.addEventListener('load', function() {
    let prevScrollTop = 0;
    let isSidebarVisible = false;

    document.getElementById('f-overlay-chkbx').addEventListener('change', (event) => {
        
        prevScrollTop = window.pageYOffset || document.documentElement.scrollTop;
        isSidebarVisible = event.target.checked;

        window.addEventListener('scroll', (event) => {
            if (isSidebarVisible) {
                window.scrollTo(0, prevScrollTop);
            }
        });
    })

});

1

Since for me this problem presented mainly on iOS, I provide the code to fix that only on iOS:

  if(!!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)) {
    var $modalRep    = $('#modal-id'),
        startScrollY = null, 
        moveDiv;  

    $modalRep.on('touchmove', function(ev) {
      ev.preventDefault();
      moveDiv = startScrollY - ev.touches[0].clientY;
      startScrollY = ev.touches[0].clientY;
      var el = $(ev.target).parents('#div-that-scrolls');
      // #div-that-scrolls is a child of #modal-id
      el.scrollTop(el.scrollTop() + moveDiv);
    });

    $modalRep.on('touchstart', function(ev) {
      startScrollY = ev.touches[0].clientY;
    });
  }

Not the answer you're looking for? Browse other questions tagged or ask your own question.