I'm doing a lightbox and I want the overlay of the lightbox to be scrollable while preventing the body to scroll. Here is the effect I'm trying to achieve (on all browsers): http://jsfiddle.net/10py25fh/3/
Here is the relevant part of my code so far.
HTML:
<body class="noScroll">
<div class="overlay">
<div class="lightbox">
/*** Lightbox content ***/
</div>
</div>
/*** Lots of other content ***/
</body>
CSS:
.noScroll {
overflow: hidden;
}
.overlay{
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
z-index: 98;
overflow: auto;
}
.lightbox {
z-index: 99;
position: relative;
}
This works find on IE and FF but doesn't work on Chrome and Opera. I notice that if the lightbox height is bigger than the window, it works find everywhere. But if the lightbox height is smaller than the window then the body keeps scrolling on Chrome and Opera but still works (don't scroll) on IE and FF.
Edit: wrong jsfiddle and typos.
This did the trick:
First wrap the overlay in a container div (#container).
Then add this:
$('#container').on('scroll touchmove mousewheel', function (event) {
event.preventDefault();
});
Combined with the overflow:hidden, works in safari, ie, ff, chrome and opera. Allows the overlay to be scrollable while the body remains "fix" with ligthboxes of every side.
I had a similar issue with a fixed overlay (in this example .overlay) and an inner modal box. In my case, I could not get the overlay to scroll in Chrome using the JS above on either the .overlay or a wrapper parent.
What did work was using event.stopPropagation() with the scroll/touchmove/mousemove bound to the overlay itself, instead of a wrapper. My guess is that it would work on a wrapper too.
Related
the next positions of elements
* {
box-sizing: border-box;
}
.container {
width: 100%;
font-size: 0;
}
.container>div {
display: inline-block;
width: 50%;
height: 100px;
font-size: 1rem;
bacground-color: #654fca;
}
<div class='container'>
<div class='item-left'>
<div class='item-right'>
</div>
all browsers position the element-left and the element-right horizontally, one after another. Only a nice browser Safari for Windows puts upright, pressing them to the left. Who can explain, or tell where to read about calculating the widths in the Safari browser, because if you reduce the width of the elements as 49%, the elements become horizontal, but with the edge remaining space.
Update your css this way and you won't need to worry about browser compatibility:
Add to your css: ( keep your original styles)
.container>div.item-left {
float:left;
}
.container>div.item-right {
float:right;
}
If you work with safari and want to find out the width, you first have to enable the developer toolbar in the browser.
You have to open the safari preferences and click on the advanced tab. Then select "Show Develop menu" in the menu bar box at the bottom of the pane. Now you can close this bar. Now right click anywhere inside of the content area and select "Inspect Element".
Now a new window should appear in the bottom of the browser. When you hover a part of the window, the code will appear. The first number is the width. Hope i could help you.
I have two DIVs, main and header. Both are position: fixed. The top of the header places it above (in the negative top margin of) the main DIV, which has overflow: auto to allow for scrolling. The header is visible on all modern desktop browsers I've tested, except Chrome and Safari on Mac, where it's clipped (hidden).
This seems like a bug, but I don't understand why it would only affect Webkit-based browsers on OS X.
Here's the code...
HTML:
<div id="main">
<div id="header">Partially clipped in Chrome and Safari on Mac.</div>
Main content goes here.<br/>
Main content goes here.<br/>
...
</div>
CSS:
#main {
position: fixed;
top: 50px;
height: 100px;
overflow: auto;
}
#header {
position: fixed;
top: 42px;
}
Live example here.
I found a few similar reports and suggestions about using -webkit-transform: translateZ(0). Interestingly, that doesn't fix it, but it does make the bug occur on Windows. Example here.
Any ideas?
When you scroll with the mouse wheel in Windows 8 the fixed background image bounces around like crazy. This only affects IE 10 and IE 11. This affects elements with position:fixed as well.
Here is an example with a fixed background-image:
http://www.catcubed.com/test/bg-img-fixed.html
Here is example code:
#section{
position: fixed;
top:0;
left:0;
background-color:#eee;
background-position: top left;
background-image: url("images/7.png");
background-size: auto;
background-repeat: no-repeat;
z-index: 10;
}
Is there a solution to keep the background still in IE 10 and 11?
I know it is a bit late for an answer but I've had the same problem and was able to fix it by adding these attributes to my css file
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
}
From the comments:
This solution stops scroll events from firing on the window, so do be careful if you're using anything that relies on such events firing. codepen.io/anon/pen/VawZEV?editors=1111 ( overflow: hidden, scroll events don't work) codepen.io/anon/pen/PNoYXY?editors=1111 ( overflow: auto, scroll events fire) - Dan Abrey
So this might cause some problems in your projects. But I don't see another way to workaround this bug in IE.
This looks like a z-index bug, try adding z-index: 1.
Looking into this, I've found the best way to debug is to:
Create a simple element at the top of the page, e.g.
<style>#test {position: fixed; background: red; top: 0; left: 0; width: 4em}</style>
<div id="test">Test</div>
In all the above cases, this works correctly, and the scroll is smooth. So this proves it can be done! Now slowly add your properties back in, until you are able to get the element with position fixed to work in the context of your site.
I then found that adding a z-index to the fixed items resolved the issue. (e.g. z-index: 1)
I also discovered that once a position is set on a child element, the bug presents it's self from that point down/onwards.
So you need to ensure none of the child elements have a position set,
or if they do, you explicitly set a position on each child.
E.g.
<!-- Works -->
<div style="position: fixed;">
<div>Nice</div>
<div>Wicked</div>
<div>Cool</div>
</div>
<!-- Element with position: relative, experiences the bug -->
<div style="position: fixed;">
<div style="position: relative;">sad</div>
<div>sad</div>
<div style="position: fixed;">happy</div>
</div>
It's fixable, but will require some tweaking!
Here is a workaround (tested on Windows 8.1):
Move the "background" CSS property to the BODY element. Currently it is on the DIV element with id="filler". Here is the resulting CSS:
body {
font-family: Helvetica, Arial, sans-serif;
background: #fff url(blue-kitty.jpg) no-repeat fixed center 100px;
}
#filler {
text-align: center;
}
.big-margin {
margin-top: 500px;
}
try to turn off smooth scrolling option.
Internet Options - Advenced Tab - Use Smooth Scrolling
it's like rendering bug.... MS IE team is investigating....
just simply define body container to relative.
<style>
body
{
position: relative;
}
</style>
The fix in my case was to simply remove the z-index property from the element that has position:fixed, IE then stopped the strange flickering.
(disabling smooth scrolling on IE options worked while having he z-index property but that's not a solution since users would most likely have it on by default).
I want to make a header div (like a banner) fixed only when the header is trying to go out of the screen as the user scrolls down. Is it possible to do without using JS? For an example in Facebook timeline, if we scroll down a banner floats up as soon as the page's header goes out of the screen. My question is, is it possible to do with only CSS?
In case it is not clear enough, I want to know whether a style "position: fixed" can be applied conditionally like when 80px of the page is scrolled.
Yes. You can do it with just CSS. This is done by having a normal scrolling header, placed above a fixed one, which shows up only after the normal one scrolls up above it. This is kind of how http://techcrunch.com is doing it.
Update [10/31/2013] - Techcrunch changed their UI recently so you cannot see this there anymore!
Check this demo: http://jsfiddle.net/WDnyb/2/
HTML
<div class="header">Header</div>
<div class="outer">
<span class="banner">LOGO</span>
<div class="header">Header</div>
</div>
<div class="content">Content</div>
Relevant CSS
.header {
width: 100%;
position: fixed;
top: 0;
bottom: auto;
}
.outer {
position: relative;
height: 100px;
}
.outer .header {
position: absolute;
bottom: 0;
z-index: 2;
top: auto;
}
.content {
height: 1500px;
margin-top: 100px;
}
This can now be done properly and without javascript with position: sticky.
Refer to https://css-tricks.com/position-sticky-2/ for examples.
warning: At the moment of writing, it is not supported on IE11, opera mini, and android's stock browser: https://caniuse.com/#feat=css-sticky
It is not possible using css. You can do using JavaScript or jQuery. Because it need some conditions.
Html----included my content within
<header1>
..............
</header1>
JS
<script>
$(document).ready(function() {
var $header1 = $("header1"),
$clone = $header1.before($header1.clone().addClass("clone"));
$(window).on("scroll", function() {
var fromTop = $("body").scrollTop();
$('body').toggleClass("down", (fromTop > 200));
});
});
</script>
i have used above script to make a header fixed,its working fine in googlechrome not in firefox.....
Dear all, is there a way to scroll, as in relatively shift the contents of, an element without using javascript, and only using CSS?
If that matters, the element in question has overflow:hidden and white-space: nowrap to make it 'hide' some parts of its content. The element is normally scrollable with javascript, but needs to be properly shifted upon initial rendering (and without further interactive scrolling, of course) in case javascript is disabled.
No, there is no way to scroll items on a page (unless it's an iframe with the hash portion of the url included, in which case the browser will control the initial positioning of the scroll, not css or html) using only CSS and HTML.
No. Not with CSS directly.
You could simulate it, by wrapping the contents with a div and giving it a margin-top value for the amount of scrolling you want.
(remember to remove it/set it to 0 with javascript when it is enabled)
update
A cool idea is what Jamie, mentions in his answer, if it fits your requirements.
update 2
Here is another solution i created out of Jamie's idea, that needs no frames.
Put an anchor <a name="anchor_name">..</a> at the place you want the scrolling to be and use a
<meta http-equiv="refresh" content="2;url=#anchor_name_here">
to auto-scroll there. (the meta element should go in the head though for (x)html conformance)
example at http://www.jsfiddle.net/gaby/f3CVY/5/
works great in all browsers i tested it (IE, Chrome, FF, Opera, Safari)
There is also another method - which is quite hacky - but it works without a reload.
The solution I've created works in the following browsers:
Firefox 4+
Safari 5+
Chrome 6+
Opera 11+
IE 10+
Android 2.3+
It's really a bit hacky, so see whether you would use it or not. :)
A little explanation
I used the HTML5 attribute autofocs on an <input>-field. As this will focus the input, it has to get it into the viewport. Therefor it will scroll to the given position. To get rid of the highlighted outline and to not see the input at all, you have to set some styles. But this still forced Safari to have one blinking pixel, so I did the trick with the span, that acts like an overlay. Note that you can't simply use display: none as this won't trigger the autofocus (only tested this in Safari).
Demo
Try before buy
The demo will run in Safari and Chrome only. IE and Firefox seem to not fire autofocus in an <iframe>.
CSS
div.outer {
height: 100px;
width: 100px;
overflow: auto;
}
div.inner {
position: relative;
height: 500px;
width: 500px;
}
div.inner > input {
width: 1px;
height:1px;
position: absolute;
z-index: 0;
top: 300px;
left: 200px;
border:0;
outline:0;
}
div.inner > span {
width: 1px;
height:1px;
position: absolute;
z-index: 1;
top: 300px;
left: 200px;
background: white;
}
HTML
<div class="outer">
<div class="inner">
<input type="text" autofocus></input>
<span></span>
</div>
</div>