Inside a position: fixed; element, scrolling elements will "lock" if you try to scroll them the wrong way at the start of a touch.
Example: touch the screen and drag downwards, then back up. The element won't scroll. If you release, wait a few seconds, then try dragging upwards, it will scroll.
http://12me21.github.io/scroll-test.html
body {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#scroll-container {
overflow-y: scroll;
height: 100%;
}
#scroller {
height: 200vh;
font-size: 50px;
}
<body>
<div id=scroll-container>
<div id=scroller>Test<br>more text</div>
</div>
</body>
This answer: https://stackoverflow.com/a/51733026/6232794 seems to be the same problem I'm having, but the fix no longer works. It seems to happen inside all fixed elements and isn't caused by -webkit-overflow-scrolling: touch; anymore.
Is there any way to fix this now? Or do I just need to avoid position: fixed; entirely?
Adding overflow: hidden; to <html> or <body> seems to fix it.
I'm not sure why this works, but I assume the problem is that safari is trying to scroll html/body instead of the element you want.
Because the scrollable section is inside a position:fixed element, scrolling the body has no visual effect, so it looks like nothing is happening.
I had a same problem and overflow hidden help to stop scrolling body element, but it also disable scrolling webpage if visitor wants to. So I created JQ solution to add class .overflow-hidden to body element, only when I need it. In my case when sidebars has active class.
$(document).click(function(){
if ($(".siderbar_menu").hasClass("side-menu-active")) {
$("body").addClass("overflow-hidden-mobile");
} else {
$("body").removeClass("overflow-hidden-mobile");
};
});
Works for me.
Related
I want to disable scrolling for when there's a popup, but I hate how the entire page changes size when you add/remove the scrollbar. Is there a way to disable scrolling without hiding the scrollbar?
Kind of like when you set overflow:scroll to an element that doesn't have enough content to scroll: it still shows the scrollbar but it's disabled.
//when popup is open, disable scroll on body
body.popupOpen {
overflow: hidden;
}
Make sure that the overflow (the scroll bar) is on the body element then add an overlay that will simply cover the body and its scroll bar when the popup is shown.
Here is a simplified example with only the overlay where you cannot scroll:
body {
overflow: auto;
margin: 0;
max-height: 100vh; /* no more than the height of the viewport*/
}
html {
overflow: hidden; /* This one is important to avoid the propagation */
}
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
}
.content {
min-height: 500vh;
}
<div class="overlay">
</div>
<div class="content">
</div>
The answer is no, but you can set 'hidden' and create a element to simulate the scrollbar, but why would you do this, it only makes the user confused.
You can create a div that fullfils the whole page view, and just make it transparent, this way you can just enable/disable the div scroll to mantain a scrollbar:
.theDivInactive {
background: none;
pointer_events: none;
width: 100vw;
height: 100vh;
overflow: hidden;
}
and switch the class when the popup is on the screen:
.theDivActive {
background: none;
pointer_events: none;
width: 100vw;
height: 100vh;
overflow: scroll;
}
`
I have fixed the issue the same way bootstrap does. Just in case other methods doesn't work for you, here's the JS trick to calculate scrollbar width for a given browser. Then on modal open, you can set the padding-right to body element:
const documentWidth = document.documentElement.clientWidth;
const scrollbarWidth = Math.abs(window.innerWidth - documentWidth);
document.body.style.paddingRight = `${scrollbarWidth}px`;
Note: this will only work well if you set overflow-y: scroll to popup bg or put the popup over the white strap that was created as the side effect of the padding-right property.
Note 2: If elements are positioned absolutely relative to body width, they will still "jump" so you need to add padding to them as well or wrap them with div that has position: relative
I have a site with a full screen overlay nav, which when triggered hides the overflow on the html element. This is to stop the page behind the nav being scrolled when the nav is open.
Stripped down SCSS (when nav is active) looks like this:
html.nav-is-active {
overflow: hidden
}
nav.active {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1600000;
}
My problem is when the nav is open the scrollbar disappears causing the page to jump - this is especially disorientating as there is a close button on the nav overlay which is supposed to line up with a menu button on the site.
My question is how can I best solve this? I can remove the overflow:hidden from the html element to preserve the scrollbar, but that then means the site can be scrolled unintentionally when the nav is open.
Any help appreciated
Mike
This is really hacky, but it should do what you want...
html {
overflow-y: hidden;
}
body {
overflow-y: scroll; // causes an empty scrollbar
height: auto; //set height = content so body can't overflow
}
You can make your scrollbar visible the same way in the overlay.
OR If you can figure out the width of the scrollbar (typically 15px on Mac and I think similar in Win 10) you can subtract from the overlay size or add padding. This is slightly better than setting the overlay to overflow-y: scroll since it won't cause scrolling INSIDE the overlay on small screens.
nav.active {
width: calc(100vw - 15px); // could be done with javascript
}
An alternative to block scroll without overflow: hidden; is position: fixed; overflow-y:scroll; so simply change this:
html.nav-is-active {
overflow: hidden;
}
with this:
html.nav-is-active {
position: fixed;
overflow-y:scroll;
}
You'll se an empty scroll bar, but the page will not "jump" anymore.
I've been working on a website which works pretty well, bar some optimisation issues that I'll tackle in the future; you can see it there: http://robin-v.net/
The problem I'm facing today is that, on mobile browsers – at least on iOS, I haven't been able to try on Android recently but I've heard it behaved similarly – scrolling causes the browser to lag quite a bit and the address bar to act weirdly.
Whenever you scroll, during the scrolling itself nothing strange happens but as soon as you lift your finger from the screen the browser freezes for a moment, and then the address bar toggles its states – if it was visible it collapses, and vice-versa. I know that the address bar is meant to collapse whenever you scroll down, but here it toggles from hidden to visible whenever you scroll, regardless of the scroll direction. (Depending on the browser, the address bar might never hide at all, and stay visible 100% of the time.)
I have no idea what might cause this behavior... the version of the website that's currently online has almost no JS (the little it has has nothing to do with scrolling).
I'm pretty sure it's due to a CSS declaration, but I don't know which.
To be honest, I'm relatively new to web development, and I learnt by myself, so I'm sure I must be doing something wrong somewhere, but I don't know what. I've faced the same issue on another website I made, so it's probably a habit I got from somewhere that I should get rid of.
From what I've gathered, I think it probably has to do with the declarations on the html or body elements, or something to do with overflow or positioning... But that's all I have. :/
I'm pasting the code for the base structural elements below, but I'm not even sure the problem lies with them.
HTML
<body class="home blog">
<div id="main">
<div id="scenes">
...
</div>
<div id="slidewrapper">
<div id="rightsec" class="mainsec">
...
</div>
<div id="leftsec" class="mainsec">
...
</div>
</div>
</div>
</body>
CSS (Sass)
html {
box-sizing: border-box;
font-size: 125%;
text-size-adjust: 100%;
line-height: 1.4;
}
body {
background: #000;
}
#main {
position: relative;
height: 100vh;
width: 100vw;
overflow: hidden;
}
#scenes {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
height: 100%;
width: 100%;
margin: auto;
pointer-events: none;
}
#slidewrapper {
position: absolute;
height: 100%;
width: 100%;
backface-visibility: hidden;
}
.mainsec {
position: absolute;
top: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#leftsec {
z-index: 1;
left: calc(60px - 100%);
}
#rightsec {
z-index: 2;
right: calc(60px - 100%);
}
Cheers!
Okay, it seems it's all caused by the elements containing the content having a fixed size, filling the whole screen (in this case, #main is 100vw * 100vh) and with overflow: hidden. When you scroll, the content inside #main moves, but the document itself doesn't, since it's not larger than the viewport. That's why the address bar never moves either.
I managed to fix the issue on a different website, but unfortunately, due to the structure of my homepage (which I linked in the question), I don't see how I could change it there. If someone has an idea, please feel free to share!
Is there any way to overlay a DIV over the browser's scrollbar?
I realize the scrollbar can be hidden using overflow: none, but I'm wanting to actually put a DIV over the scrollbar instead of hiding it.
You can place your div over scroll bar if that scroll is not for <html> element. Here is code which makes overflowed div over scrollbar of another div.
JSFiddle
HTML:
<body>
<div id="content">
Code goes here instead of BODY
<div class="test"></div>
</div>
<div class="overflow">CONTENT FOR OVERFLOW ELEMENTS</div>
</body>
CSS:
html, body {
margin:0;
padding: 0;
}
#content {
background: lime;
overflow: auto;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.overflow {
position: fixed;
right: 0;
top: 0;
bottom: 0;
width: 10px;
background: blue;
}
.test {
background: red;
height: 1000px;
margin: 20px;
}
No, you cannot render content outside the viewport. However, you can remove the browser's scrollbar and substitute your own, allowing much greater flexibility.
See this question for more information.
If you look at a document in google docs, this is very similar to what they do to show their own scroll bar.
If you hide the scrollbar using overflow:hidden, then you are free to create your own element on the right hand side of your page. You won't be "overlaying" the browser's scroll bar. Instead your scrollbar will simply be in the same location as the browser's was before you hid it using overflow:hidden.
You will plunge yourself into the fun challenge of emulating the scrollbar's behavior, with everything from dragging, clicking on the page up/down areas, etc. and moving your content in response.
No. You cannot unless you write your own scrollbar implementation.
The drawbacks of writing your own scrollbar implementation include lack of testing and support for other devices.
However, this library and this question may be helpful.
You can not place a div outside the document/viewport. However you are able to hide the scrollbar and take its place in with a div or custom scrollbar.
jsfiddle demo
css
#scrollbardiv{
height:100%;
width:12px;
background:red;
position:fixed;
top:0px;
right:0px;
}
.noscrl{
overflow:hidden;
}
body{
overflow:auto;
}
js
$("#toggle").on("click", function(){
$("body").toggleClass("noscrl");
})
I have a problem with oveflow-x in my page. Althought the body has overflow-x hidden, I can still scroll on the page.
<html>
<body>
<div id="content">
<div id="mydiv"></div>
<div>
</body>
</html>
html and body have overflow-x:hidden.
Div "content" has nothing in the css and div "myDiv" has position absolute.
How can I make the "mydiv" not to go out of the page? Because now what happens is that I can still scroll on x.
Fiddle > http://jsfiddle.net/o7dph6sj
Without more code, the best answer I can think of is that your html and body tags do not have any kind of width set so they are inheriting the default width of 100%. Meaning that every child element is going to be inside of that 100%.
Set the body to have a set width and then set overflow to hidden, then check if the elements in your page are exceeding the width.
Example:
body{
width: 1024px;
overflow-x: hidden;
}
Also, the code that you set inside of #content could directly be affecting it as well, some elements will ignore its parents and be rendered outside of them which brings us back to... give us more code.
Because you're using a bad selector for overflow. If you want to avoid VERTICAL SCROLLING you use this:
html, body {
overflow-y: hidden;
}
to avoid HORIZONTAL SCROLLING:
html, body {
overflow-x: hidden;
}
to avoid BOTH
html, body {
overflow: hidden;
}
take a look to your forked fiddle where I avoid BOTH overflow axises and there's no overflow at all
Change "overflow-x: hidden !important;" to be
html, body {
overflow: hidden !important;
}
or
html, body {
overflow-y: hidden !important;
}
In-fact you can ignore "!important" since you use !important to override other rule. And here you were just using the wrong property "overflow-x" which is for "Horizontal scroll"
And it works!!!
Here is the working Fiddle > http://jsfiddle.net/o7dph6sj/1/
Updated the Answer with addition requirement:
You add "overflow: hidden" when you don't want both scrolls,
AND "overflow-y: hidden;" hides the Horizontal Scroll
AND "overflow-x: hidden;" hides the Vertical Scroll
Checkout the updated Fiddle and try on your by commenting and un-commenting this code:
html, body {
overflow-y: hidden; /* Hides Horizontal Scroll*/
/*overflow-x: hidden;*/ /* Hides Vertical Scroll*/
/*overflow: hidden;*/ /* Hides Both Vertical and Horizontal Scroll*/
}
Updated Fiddle "http://jsfiddle.net/o7dph6sj/3/"
Checkout these articles >
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
I tried for several hours and I found that the body size needs to be specified, and its attribute position must be set to absolute. Then you can have overflow-x: hidden work well in your code.
in this case, I have a web with a navbar that I want to slide right to hide from the main body in mobile size. I called #media screen and (max-width:576px) to make it run on mobile size. the problem occurred before I specify the max-width the body must be shown: I still can scroll to the right though I specified the overflow-x: hidden
so I added max-width:100vh inside the body style, and voila. it works!
checkout my code:
body{
min-width: 0px;
max-width: 100vh;
position: absolute;
overflow-x: hidden;
}
nav ul {
position: absolute;
right: 0;
width: 40%;
top: 34px;
height: 100vh;
z-index: 1;
background-color: #194ca7;
}