stop scrolling on body when modal is open and allow scroll on modal divs

Question

When I open a modal I can scroll down to the body of the page but I can't scroll down the modal to see all the data (only the background site is scrolling), any idea how to stop scrolling on the background body but allow scrolling on the modal itself?

this is my css:

.modal-mask { position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; height: 10000px; background-color: /* rgba(0, 0, 0, .5); */rgba(43, 46, 56, 0.9); transition: opacity .3s ease; } .modal-container { box-sizing: border-box; width: 75%; z-index: 10000; /* max-height: 650px; */ overflow: auto; margin: 0px auto 0; padding: 20px 30px; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, .33); transition: all .3s ease; font-family: Helvetica, Arial, sans-serif; -webkit-overflow-scrolling: touch; }

modal html:

<div class="modal-mask" @click="$emit('close')" v-show="show" transition="modal"> <div @click.stop class="modal-container"> <button @click="$emit('close')"><i class="fa fa-chevron-left" aria-hidden="true"></i> </button> <div class="modal-header"> <h2>Title</h2> </div> <div class="modal-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="modal-footer text-right"> <!-- <button class="modal-default-button"> Close </button> --> </div> </div> </div>

I tried adding overflow:hidden to the body when the modal is opened and it does cancel the scrolling on the body but still doesn't give me scrolling on the modal

Zac Webb · Accepted Answer · 2017-05-22 00:27:01Z

Using jQuery/JS to modify the body's overflow when the modal is opened, you can make it so the page will stop scrolling, and the modal will still be scrollable.

The key aspects of this solution are:

The modal has overflow: scroll; set.
The body is set to overflow: hidden; when the modal is opened.

I mocked up a very simple example, see below:

$('.click').click(function(){ $('.modal').show(); $('body').css("overflow", "hidden"); });

.content { height: 700px; width: 100%; background: grey; } .click { background: blue; cursor: pointer; } .modal { position: absolute; width: 100px; height: 100px; background: red; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; overflow: scroll; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="content"> This is the main content that scrolls until the modal is opened. <div class="click">Click me to open modal</div> <div class="modal">This is a modal that requires me to scroll down on hence there is a lot of placeholder text in here that I am having to type man I should've used Lipsum.</div> </div>

Let me know if you need any other help.

I copied your code into a jsfiddle and played with it and it works perfectly but won't work with my code, maybe do you see something that could block it in my code?

PRAISER · Accepted Answer · 2017-05-22 00:22:14Z

You can set the body's style to overflow: hidden this makes the scroll go away, then all you need is to make your modal inside of a div that its overflow is scroll or auto and basically make the model scrollable. Remember the modal parent should be position: fixed and its width and height should be 100%.

thanks this was the correct answer the same from the example above with the sample code so I highlighted that one, thanks for your help

Collectives™ on Stack Overflow

stop scrolling on body when modal is open and allow scroll on modal divs

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related