I am using a preloader before the website loads. also, I want to make sure that there is no scrolling happening or any scrollbar present while the contents are loaded. I'm using the below code.
<div id="preloader"></div>
#preloader
{
position: fixed;
overflow-y: hidden !important;
-webkit-scrollbar: none;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(../images/preloader.gif) center no-repeat #fff;
}
But still there is scrollbar visible and the page is scrollable.
I would add a class to the <body> during loading and remove once completed.
body.loading {
overflow: hidden;
}
enter code he
body.loading{overflow:hidden}
#preloader
{
position: fixed;
overflow-y: hidden !important;
-webkit-scrollbar: none;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(../images/preloader.gif) center no-repeat #fff;
}
<div id="preloader"></div>
re
Related
Opening a modal on my site is causing a double scroll bar (both vertical) issue. The modal uses position: fixed and overflow: auto. I know it is overflow: auto causing the issue, but I need this style, as my modal contains a lot of content which in most cases could not fit in the users viewport, therefore scrolling the content is a requirement.
.enquire-nav {
font-family: inherit;
top: 0;
left: 0;
z-index: 999;
position: fixed;
width: 100%;
height: 100%;
overflow: auto;
background: rgba(36, 32, 33, .97);
}
Thanks in advance :]
In the end I found that the best solution was to toggle a class on the body when the modal is opened, this class would add overflow-y: hidden. This allows me to scroll the content of the modal if it overflows the body, but doesn't allow scrolling of the body itself at the same time. No more double scroll bars.
The jQuery:
$(".menu-trigger, .primary-nav-item, .hamburger-one").click(function () {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
$('body').toggleClass("no-scroll");
});
The CSS:
.no-scroll {
overflow-y: hidden;
}
So I've solved this issue before while building out my own jQuery modal plugin. Here's a link to the github repo, for reference: https://github.com/thecox/bw-box. I'll dig around and find some of the relevant styling that resolved the issue. Here's the main structure:
HTML
<div id="default-modal" class="bwbox__modal">
<div class="bwbox__modal__outer">
<div class="bwbox__modal__middle">
<div class="bwbox__modal__inner">
CLOSE X
<div class="bwbox__modal__inner__content">
<!-- Content Goes Here -->
</div>
</div>
</div>
</div>
</div>
CSS
.bwbox__modal {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, .8);
overflow-y: scroll;
z-index: 9999;
}
.bwbox__modal__outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.bwbox__modal__middle {
position: relative;
display: table-cell;
vertical-align: middle;
}
.bwbox__modal__inner {
position: relative;
background: #fff;
font-size: 1em;
font-weight: 300;
text-align: left;
color: #555;
width: 90%;
max-width: 885px;
z-index: 9999;
padding: 2em 2% 1em;
margin: 30px auto;
.bwbox__modal__inner__content {
width: 100%;
height: 100%;
z-index: 9999;
text-align: center;
}
.bwbox__modal__inner__close {
position: absolute;
color: #555;
top: 10px;
right: 20px;
font-size: .9em;
text-decoration: none;
}
Basically, the outer, middle, and inner containers center the container vertically and horizontally in the frame in such a way that if they expand beyond the window height, you can still scroll. Maybe pull it down and check out the demo.Let me know if you have any questions.
In Angular, similar to Leon Burman's answer:
setBodyModalHidden(isHidden: boolean) {
document.getElementsByTagName('body').item(0).style.overflowY = isHidden ? 'hidden' : '';
}
I was wondering if there's a way to block the scroll bar until a div and its loader gets to the point of display none. I don't know if this can be done just with html or css. Any advice?
#loader {
background: #eeeeee;
bottom: 0;
height: 100%;
left: 0;
right: 0;
top: 0;
width: 100%;
display:block;
margin: 0 auto;
position: relative;
overflow: hidden;
z-index: 9999;
}
#loaderInner {
background:#eeeeee url(https://dl.dropboxusercontent.com/s/asdfghfdsas/loader.gif) center center no-repeat;
background-size: 250px 250px;
position: absolute;
height: 250px;
width: 250px;
display:block;
margin: 0 auto;
top: 50%;
left: 50%;
margin: -125px 0px 0px -125px;
}
body#layout #loader {
display:none;
overflow: scroll;
}
You can use some simple CSS to prevent scrolling on the page. But you would need to use JS to handle when to apply this class.
CSS
body.loading {
overflow: hidden;
}
Another solution is to put loader div with fixed position, so there's no need to hide the scrollbar (which can cause a strange user experience):
#loader {
position: fixed;
top: 0;
left: 0;
...
}
The div will show while scrolling
In this case you wouldn't need the "body.loading" rule.
The loader scrolling due to the positioning, so we can easily remove the scroll by changing the position css to position:fixed;
it will 100% work.......
#loader {
position: fixed;
background: #eeeeee;
bottom: 0;
height: 100%;
left: 0;
right: 0;
top: 0;
width: 100%;
display:block;
margin: 0 auto;
overflow: hidden;
z-index: 9999;
}
To me this is the best solution to delete the scroll bar while de Loader is display
html, body.loader {
overflow: hidden !important;
}
So, i'm trying to create a fixed background, actually its working. The problem is with my footer, because it is set back from the main and as the user goes scrolling it is displayed. The problem is when I put the fixed image, it is in the main with overflow: hidden, however the overflow: hidden does not work.
Here is a fiddle with my concept without the image: http://jsfiddle.net/7q8v1vsu/
And here with the fixed image: http://jsfiddle.net/L4oofkso/
And finally the code:
<div id="main">
<div id="main-content"></div>
<div id="main-background">
<img src="http://clickalifecoachblog.com/wp-content/uploads/2015/01/Child-Girl-Bear-Toy-Autumn-Leaves-Nature-Photo-HD-Wallpaper.jpg">
</div>
</div>
<div id="footer">
<div id="footer-inner"></div>
</div>
Here is the CSS:
#main{
position: relative;
background: #749B35;
margin-bottom: 70px;
height: 800px;
overflow: hidden;
z-index: 10;
}
#main-background{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
overflow: hidden;
z-index: 0;
}
#main-background > img{
position: absolute;
left: 0;
top: 0;
width: 1200;
z-index: 0;
}
#footer{
position: relative;
}
#footer-inner{
position: fixed;
background: #E76144;
bottom: 0;
width: 100%;
height: 70px;
z-index: 0;
}
Anyone know if this can be fixed with just CSS or I'll have to appeal to Javascript?
Thanks
If it is a fixed background, why aren't you using a proper fixed background? http://jsfiddle.net/L4oofkso/1/
#main{
position: relative;
background: #749B35;
margin-bottom: 70px;
height: 800px;
overflow: hidden;
z-index: 10;
background: url("http://clickalifecoachblog.com/wp-content/uploads/2015/01/Child-Girl-Bear-Toy-Autumn-Leaves-Nature-Photo-HD-Wallpaper.jpg") center center no-repeat;
background-size: cover;
background-attachment: fixed;
}
http://jsfiddle.net/7q8v1vsu/
Using background-attachment: fixed; will provide you with the desired results.
I've got a modal style I'm using from http://tympanus.net/codrops/ but I've created a custom close button (.md-close) that I want to be truly fixed in the top right as the user scrolls the content of the modal window.
Code here: http://codepen.io/jeremypbeasley/pen/upzrB
Right now when you scroll, .md-close leaves the visible area, making it hard to close without scrolling up. How can I force this to stay put?
I realize this is something to do with the position property but I've tried every possible combination of the parents and children. Might this have something to do with the transform property I'm using?
Any help?
Full css i used :
or live : http://codepen.io/anon/pen/lynBm
.md-close {
position: fixed;
top: 3vw;
right: 3vw;
height: 50px;
border: 0px;
cursor: pointer;
width: 50px;
background: black;
text-indent: -9999px;
overflow: hidden;
display: block;
background: blue url(http://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/VisualEditor_-_Icon_-_Close.svg/120px-VisualEditor_-_Icon_-_Close.svg.png);
background-size: 100%;
z-index: 99999;
}
.md-trigger {
width: 300px;
height: 300px;
background: blue;
text-indent: -99999px;
margin: 100px auto;
}
.md-modal {
width: 100%;
max-width: 100000000000px;
max-height: 100%;
position: absolute;
top: 0;
left: 0;
transform: none;
backface-visibility: visible;
}
.md-content {
max-height: 100%;
overflow: auto;
padding: 10% !important;
}
.md-show.md-effect-12 ~ .md-overlay {
background-color: black;
}
I solved this problem by adding a max-height of 100vh to .md-content
I've read all the suggestions about how to fix this, but my site is still allowing users to scroll horizontally no matter what I do. I've gotten the horizontal scrollbar to be hidden, but using arrow keys or the mouse wheel still lets users scroll. I've tried to assign overflow:hidden on individual elements and on html. Nothing seems to work.
HTML:
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<div id="shapes">
<div id="design-shape"></div>
<div id="contact-shape"></div>
</div>
</body>
CSS:
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
position: relative;
vertical-align: baseline;
overflow-x: hidden;
}
#design-shape {
background: none repeat scroll 0 0 #e98e82;
position: absolute;
transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
height: 1040px;
top: 1200px;
left:50%;
width: 5000px;
margin-left: -2500px;
z-index: 6;
}
#contact-shape {
background: none repeat scroll 0 0 #333333;
position: absolute;
transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
height: 800px;
top: 1960px;
left:50%;
width: 5000px;
margin-left: -2500px;
z-index: 17;
}
What's Going On
In Chrome, you can scroll sideways, which shows things that you don't want shown. This is despite not having a horizontal scrollbar.
The reason is that the shapes that extend over to the side are absolutely positioned, and their parent #shapes is not positioned relatively or absolutely, so it can't catch them. To fix this, we need to absolutely position #shapes, and set position:relative to #shapes's parent, #page Add a few fiddly bits to ensure that everything is positioned correctly and we are good to go.
Code
CSS:
#page {
position:relative;
}
#shapes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
There is two classes (shown below) that have a width: 5000px; and a margin-left: -2500px. Removing/changing that should fix the problem for you.
#design-shape {
background: none repeat scroll 0 0 #e98e82;
position: absolute;
transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
height: 1040px;
top: 1200px;
left:50%;
width: 5000px;
margin-left: -2500px;
z-index: 6;
}
#contact-shape {
background: none repeat scroll 0 0 #333333;
position: absolute;
transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
height: 800px;
top: 1960px;
left:50%;
width: 5000px;
margin-left: -2500px;
z-index: 17;
}
EDIT:
Adding position: relative; to the shapes style should work.
#shapes {
overflow-x: hidden;
position: relative;
}