We Keep Coding

Prevent BODY from scrolling when a modal is opened in angular application

I want my body to stop scrolling to top when I am trying to open popup modals. I am using both angular material and ng-bootstrap popup modals.
I've tried the piece of CSS code below, but the issue is still there, please help.
body.modal-open {
overflow: hidden;
position: fixed;
}

From what I read here here the position of the modal is set to default at the top. To completely remove the scrolling, use that to position the modal down. If you just want to be at the same position after the modal close, you can use this which I used from the comments: here
openModal() {
// Remember the current scroll position
let pos = (document.documentElement.scrollTop || document.body.scrollTop);
this.bsModalRef = this.modalService.show(ModalComponent);
this.modalHideSubscription = this.modalService.onHide.subscribe(() => {
//Return back to the position before opening modal
window.scrollTo(0,pos);
this.modalHideSubscription.unsubscribe();
});
}

Scrolling issues with multiple bootstrap modals

I have a page with a modal with a lot of info so you need to scroll. This modal contains a link to a second modal.
When I
open modal 1
click on link to open modal 2 (modal 1 stays in background)
and then close modal 2 so that I am back on modal 1
modal 1 looses scrolling (there is still a scroll bar but it doesn't do anything). Instead the modal stays in the position it was at the time of opening modal 2.
I played around with closing the background modal with js first (but that messes up scrolling on the second modal). It appears that every time I try to open/close more than one modal I always get some issue with the scrolling.
Any suggestions on how to handle this?

Add
.modal { overflow: auto !important; }
To your CCS.
Without your code I went ahead and created this jsFiddle that recreates your issue, or at least a very similar one. Add your code and I will test if this works or not.
Adding that line to the CSS fixed the issue as demonstrated with this jsFiddle.
Solution taken from this thread on github which offers other solutions as well.

The solution that worked for me was:
$('.modal').on("hidden.bs.modal", function (e) {
if ($('.modal:visible').length) {
$('body').addClass('modal-open');
}
});

$(document).on('hidden.bs.modal', '.modal', function () {
$('.modal:visible').length && $(document.body).addClass('modal-open');
});

this is the solution:
<script>
$('#id_ofyou_secondary_modal').on('hidden.bs.modal', function (e) {
$('body').addClass('modal-open');
});
</script>
take care that "#idofyousecondarymodal" is the id of the secondary or tertiary or infinite modal. but NEVER write the ID of the first modal.
example i have 2 modal:
<div id="mymodal1" class="modal fade in" style="display:none;">
.
.
.
.
</div>
<div id="mymodal2" class="modal fade in" style="display:none;">
.
.
.
.
</div>
then the script will be:
<script>
$('#mymodal2').on('hidden.bs.modal', function (e) {
$('body').addClass('modal-open');
});
</script>
jus add this code and work fine.

I tried the previous solutions, and not working for my use case:
just adding css .modal { overflow: auto !important; }
This will cause the content below modal become scrollable. Not good when you want to keep the previous content position. especially in mobile browser.
Use javascript to track opened modal and keep the 'modal-open' class in body element using this jQuery selector $('.modal:visible').length. This is not working when there are multiple modal opened and closed fast. I use BS modal for my ajax spinner, so the $('.modal:visible') is not accurate.
This is the working one for me:
Use JS global variable to keep track/count of opened modal; instead of just using :visible selector
And I added css style so I don't have to recalculate backdrop z-index
https://stackoverflow.com/a/63473738/423356
var bootstrapModalCounter = 0; //counter is better then using visible selector
$(document).ready(function () {
$('.modal').on("hidden.bs.modal", function (e) {
--bootstrapModalCounter;
if (bootstrapModalCounter > 0) {
//don't need to recalculate backdrop z-index; already handled by css
//$('.modal-backdrop').first().css('z-index', parseInt($('.modal:visible').last().css('z-index')) - 10);
$('body').addClass('modal-open');
}
}).on("show.bs.modal", function (e) {
++bootstrapModalCounter;
//don't need to recalculate backdrop z-index; already handled by css
});
});
.modal {
/*simple fix for multiple bootstrap modal backdrop issue:
don't need to recalculate backdrop z-index;
https://stackoverflow.com/questions/19305821/multiple-modals-overlay/21816777 */
background: rgba(0, 0, 0, 0.5);
}
This is modified fiddle from #Keeleon for the fix https://jsfiddle.net/4m68uys7/
This is github issue https://github.com/nakupanda/bootstrap3-dialog/issues/70

Add following to your CSS :
.modal
{
overflow: scroll !important;
}

How to restrict scrolling to the div that mouse is currently hovering?

I have a div name scrollable and whenever I hover mouse over it I want scrolling limited to this div only so that after reaching top/bottom of the div, scrolling will be stuck to the div. I've used the following code:
<div class="scrollable" style="overflow-y: scroll; height: 2px;"
onmouseover="document.body.style.overflow='hidden'"
onmouseout="document.body.style.overflow='auto'" >
Some text<br>sometext<br>sometext
</div>
Doing this gets the job done, but only problem as main scrollbar is hidden the webpage looks weird everytime I hover over '.scrollable'
Also using window.onwheel=function(){return false;} doesnt help as it prevents scrolling of anyelement.
Is there a way to enable scrolling only on hovered div and not on others while keeping main page scrollbar visible?
Thank you

You can disable scrolling without hiding the scrollbar, check this post.
Using jQuery, this would lead to:
$(".scroll").hover(function() {
var oldScrollPos = $(window).scrollTop();
$(window).on('scroll.scrolldisabler', function(event) {
$(window).scrollTop(oldScrollPos);
event.preventDefault();
});
}, function() {
$(window).off('scroll.scrolldisabler');
});
Check it out.

For me, hopefully can work
$('body').on('mousewheel', '.someDIVClass', (e: any) => {
if (e.originalEvent.wheelDelta / 120 > 0) {
// You can get scroll value here to do other things
}
else {
// You can get scroll value here to do other things
}
// This will prevent window to scroll
e.preventDefault();
e.stopPropagation();
});

ScrollTop bootbox modal on fadeIn

I use bootbox.js to make modal but when the modal fadeIn and the content is too long, the scrollbar goes at the level of the bottom button.
I need the scrollbar stay on top when modal appear

I've solved adding .off("shown.bs.modal"); after the bootbox.dialog.
bootbox.dialog({ ... }).off("shown.bs.modal");

You can set the scrollTop with jQuery in you callback.
bootbox.alert("Hello world!", function() {
$('body').scrollTop(0);
});

jQuery Toggle Menu

$(window).on('resize', function() {
if ( $( window ).width() > 768 ) {
$('#menu-main-navigation').show();
}
});
$('#nav-toggle').on('click', function() { // start of the nav toggle
$('#menu-main-navigation').slideToggle('slow');
});
i currently have the above code, works fine on page load but if you open the toggle and close it, when you resize the window above 768px it defaults to open no matter what state the menu was left in below the cut off point.
how can i get it to be always what the toggle menu is? and obviously show the menu every time above 768px?

Try adding $('#menu-main-navigation').slideToggle('slow'); after the .show event in your first conditional statement.