I'm trying to stop the body of my page from scrolling (at all) while a modal overlay is open.
The modal covers the entire screen ({position: fixed;top:0;left:0;right:0;bottom:0;}), and it has its own scrolling. However, when I run to the end of the scroll on my modal window, the main window starts scrolling behind it. I've tried everything I can think of to make the body stop scrolling. These things haven't worked:
CSS
body {
overflow: hidden;
pointer-events: none;
-webkit-overflow-scrolling: none;
}
#content { /* which contains all the non-modal content of the body */
-webkit-transform: scale(0);
position: relative; left: 100%;
}
using iScroll
blocking the scroll event of window or body
blocking the touchstart event on body
Looks like you're pretty close.
When your modal is open, try this CSS:
body{
overflow:visible;
max-height:100%; /* or 100px or something smaller than the screen if your viewport isn't set */
height:100% /* or 100px or something smaller than the screen */
}
Related
is there really any way to hide scrollbar in Firefox, without manipulating the padding/margin without set to absolute, and without creating a browser specific css file, I just want to know is there any clean solution like this.
::-webkit-scrollbar {
display: none;
}
Unfortunately this only works for webkit browsers.
html { overflow: -moz-scrollbars-none; }
you can use a trick
add a parent to your elements with this style
html, body{
height: 100%;
width: 100%;
overflow:hidden;
}
#container{
height: 100%;
width: 100%;
overflow: auto;
padding-right: 10px;
box-sizing: content-box;
}
this trick send the scrollbar out of the view , it's exist but user didn't see it
If the size of the content is less than the size of the window, usually Firefox will hide the scroll.
The problem that happens sometimes is that if the size of the content changes for any reason or the size of the window changes to the content, the scroll bar will reappear and cause a mutation in the page.
If you want the scroll to always be visible in Firefox, you can use the following command
html {
overflow-y:scroll;
}
I am creating an application that has a menu on the left hand side of the screen. The menu has the following CSS applied to it:
.menu .levelHolderClass {
position: absolute;
overflow: hidden;
top: 0;
background: #336ca6;
width: auto;
min-height: 100%;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 1em;
zoom: 1;
}
This works until the screen dynamically resizes to show more contents as the screen is a table-like structure loading content as the user scrolls down.
Is there any particular CSS tag which I can use to indicate that the element should resize after the page size has increased? Currently when the screen adds more rows the menu stops after 100% screen height.
If there is no CSS tag to do this, how would you approach it in Javascript?
Edit: The images below shows the menu (blue bar) before and after scrolling down past 1 page height.
To temporarily appease the issue, I've added :
position: fixed;
to the css. This makes the menu at least scroll with the user regardless of the page resizing.
I tried to create a modal window having full height even if the content is small. I set css min-height:100% to .modal-dialog and tried various other options. But min-height is not working for modal window.
My requirement is:
Even if content is small modal window should be full screen
If content is huge modal window should have a scroll bar and should include all content.
You can use height 100% only if the object is inside an element with known height. If the parent have no height, the browser has nothing to reference.
Solution in pure CSS:
.my-div {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
You can set in jquery function where you open the dialog:
$('.my-div').css('height', window.innerHeight);
Try this
.modal-dialog {
width: 100%;
height: 100%;
padding: 0;
}
.modal-content {
min-height: 100%;
height:auto;
border-radius: 0;
}
How to make Twitter bootstrap modal full screen
So, my problem is that when I have some scrolled element, scrollbar on touch/mobile devices doesn't hide automatically when I didn't scroll the content. It's always stays visible. But, I have to say, I don't know if it's problem with my CSS .touch .scrollable rules or it's because I'm testing this in device emulator in Chrome (I don't have with me right now actual mobile device on which I could test it). If someone can take a look at my code: http://jsfiddle.net/om4xmwnh/ and tell if/what is wrong with it I would really appreciate the help. Thanks! :)
by using css we cannot Auto hide scrolling content sidebar on touch devices
we have to use mordernize js
I'm not sure if I understood your question, but if you want to hide the scrollbar and make it visible only when it's necessary for example on hovering the div, I think something like this would do it:
.no-touch .scrollable {
position: relative;
overflow: hidden;
}
.no-touch .scrollable:hover {
overflow: auto;
}
or something like this depending on the screen size you want this to take effect
#media (max-width: 700px){
.no-touch .scrollable {
position: relative;
overflow: hidden;
}
.no-touch .scrollable:hover {
overflow: auto;
}
}
if this doesn't work, I think your solution for this is using some scrollbar plugin or create one
When you smallen your browser to 1000px width then there is a horizontal scrollbar, is there any way to remove this above 1000px? Check my screendump below.
I have tried a clearfix but this didn't help and tried overflow:visible;
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */
Any clean easy way to fix this with css?
#media all and (min-width: 1000px) {
body {
margin:0;
}
.wrapper {
overflow-x: hidden;
}
}
If browser is more then 1000px wide there won't be horizontal scroll.
The only thing that you can do (which still keeps your site accesible), is set the width on which the scrollbar should appear.
You can fix that by setting a minimum width for the body.
Add this to your stylesheet:
body { min-width: 1200px; }
When the browser is resized smaller than 1200px, the scrollbar will appear.
Use the overflow-x property to hide the horizontal scroll bar on div that creates the horizontal scrolling.
For Instance,
Overflow-x:hidden;
EDIT
If you want 1000px where the scroll should not come and it still comes in 1020, the case is that you have a padding/margin applied somewhere that is taking those extra pixels. You need to remove it to get your thing working.
I have decided when my browser is smaller than 1200px, the overflow:hidden; on carousel which is 1000px wide can be used.
Vladislav Stanic pointed me to the right direction, thanks all.
#media all and (max-width: 1200px) {
.carousel {
overflow-x: hidden;
}
}