Geek Answers Handbook

Modal shift of fixed position content

After a lot of research, I could not find the right solution for moving to the right of fixed positioned elements , image covers and standard content when the modal window is open.

Note I'm looking for a general, clean solution, not a hard-coded fix that will only work on a specific layout.

Does anyone know how to solve this problem? Please refer to this example: http://codepen.io/microcipcip/pen/kXdRWK

body { height: 2500px; &.-modal-open { overflow: hidden; } } .fixed { position: fixed; top: 0; left: 0; width: 100%; padding: 20px 0; background: #FF0000; } .modal { overflow-x: hidden; overflow-y: scroll; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity .2s ease-in-out; body.-modal-open & { opacity: 1; } }
+5
source share
3 answers

The solution is a very simple and clean css fix:

 .-modal-open .fixed, .-modal-open .content { overflow-y:scroll; }

.. However, this requires that your content be created in different ways. You should never use stock for your content, but rather transfer it to a container and use the add-on instead.

The scrollbar width is not always 17px ... 17px for Firefox, but 15px for chrome, sometimes IE doesn't even have the scrollbar width depending on the code.

Here is the updated pen: http://codepen.io/scooterlord/pen/KgKLwB

edit: forgot to say that this is a cross-browser solution and works flawlessly wherever I tested it. If the browser is mobile, then no change in width occurs due to the addition / removal of additional scroll bars, and depending on the browser, the newly created scroll bars for content / fixed elements always coincide with the initial scroll.

+2
source

The main trick is not to use the body as a shell of content. Use the highlighted div as a wrapper and place your modals outside so that the scrollbars do not interfere with each other.

 var $btnShow = document.querySelector('.show'); var $btnHide = document.querySelector('.hide'); var $body = document.querySelector('.modal'); $btnShow.addEventListener('click', function() { $body.classList.toggle('-modal-open') }); $btnHide.addEventListener('click', function() { $body.classList.toggle('-modal-open') }); 
 .wrapper { position: fixed; top: 0; left: 0; bottom:0; right:0; overflow: auto; } .content { background: url('https://www.dropbox.com/s/m16kxhb2jg5jwwh/bear-800x450.jpg?dl=0&raw=1'); background-size: cover; background-position: center center; height: 2500px; width: 100%; } .clickme { position: fixed; top: 50%; left: 50%; padding: 10px; border: none; background: #000000; color: #ffffff; text-transform: uppercase; transform: translate(-50%, -50%); } .clickme:hover { background: grey; cursor:pointer } .modal { overflow-x: hidden; overflow-y: scroll; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: none; transition: opacity .2s ease-in-out; z-index: 3; } .modal.-modal-open { display:block; } .modal-content { min-height: 1500px; margin: 100px; background: url('https://www.dropbox.com/s/u520y7yo711uaxi/poster2.jpg?dl=0&raw=1'); background-size: cover; } 
 <div class="modal"> <div class="modal-content">Content <button class="clickme hide">Toggle Modal HIDE!</button> </div> </div> <div class="wrapper"> <div class="content"> <button class="clickme show">Toggle Modal SHOW!</button> </div> </div>
+2
source

How about adding 17px of the right margin to the body every time the modal opens. This will emulate the space reserved for the scroll bar. (17px - width of standard browser width)

 body.-modal-open { margin-right: 17px; }

in the meantime, since for a fixed element you are recounting the width;

 .-modal-open .fixed { width: calc(100% - 17px); }

There is another problem, although the CSS background image is still shifted, the solution just puts it in the div container instead of the body.

-1
source

More articles:


All Articles