I'm having a responsive website which has the menubar as a sidebar (like FB app) which is fixed via position: fixed; to the right corner. This works fine so far except for iOS7 in combination with -webkit-overflow-scrolling: touch;. The fixed element does not stay at its position, moreover it jumps to the fixed position after the scroll is finished.
Does anyone of you have an advice?
Thanks
I've been struggling with exactly same issue for the whole day, the conclusion is, yes, there is a bug when you position an element as 'fixed' within a container with '-webkit-overflow-scrolling: touch' in Apple screen devices. And I couldn't find any work around. '-webkit-transform: translate3d(0,0,0)' nor '-webkit-backface-visibility: hidden' make any difference.
So finally i got it working by reassembling my html structure, so the fixed element is not within the scrollable container, is in an upper layer. Maybe not ideal if the 'body' is your scrollable container, but hoping it shed some light for a possible solution.
Extending it with a simplified example:
<body>
<sidebar></sidebar>
<div id="content-wrap">
<article></article>
<footer></footer>
</div>
</body>
And CSS would look like:
sidebar{
position: fixed;
}
#content-wrap{
-webkit-overflow-scrolling: touch;
}
Basically the bottom line is, don't position as fixed an element which exist within a scrolling touch container. You have to take it out if you don't want to deal with that iOS weird problem.
I was able to solve this problem by dynamically changing the -webkit-overflow-scrolling style to auto whenever a button was triggered to show the position: fixed div (which is inside the scrolling container).
I simply add the dont-scroll class.
.container{
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.container.dont-scroll{
-webkit-overflow-scrolling: auto; /* The fix */
}
Once the position: fixed div is hidden (in my case, when a user clicks the 'cancel' button on the popup modal), I dynamically remove the dont-scroll class to enable the smooth scrolling once again.
Related
I am new to HTML and CSS and am creating a website for a basic university course. For a project, I have created 8 div cards highlighting the planets of the Solar System but cannot get the cards out of this fixed/unscrollable position.
This is the link to the current page state:
https://hollandtheperson.com/dight/250/website/planets.html
Any tips on how to fix this?
You have added overflow: hidden; for the CSS in the body tag, which hides the scrollbar essentially making the scroll feature unusable, if you remove it then it should work.
You can set the overflow-x instead of overflow to hidden, like so:
...
overflow-x: hidden;
...
This disables horizontal scroll but allows vertical scroll
The problem isn't really with it being fixed in place, but i can see why you got that impression.
You're using overflow: hidden; which means "if something doesn't fit, snip it off".
So, because the overflow has cut away everything wasn't already within the viewport - there is now nothing outside the viewport, and hence, no reason to allow scrolling.
Fixed the .card height and add overflow-x: hidden which give you scrolling card. Sample code given below:
.card{
// add additional code
height: 350px;
overflow-x: hidden;
}
Hi can see that you have added items in css of body tags which i guess you should remove in order make it scrollable feature those are
height: 100vh;
overflow: hidden;
Please check if that works hopefully it should be.
Is there a way to prevent scrollbar from pushing content, or the entire page to the left with pure css?
I mean no hacks or anything.
I tried two javascript solutions:
1) Set body to overflow hidden, store the body.offsetWidth in a variable, then overflow visible and then subtract that offsetWidth with the current body.offsetWidth and apply the difference to the right margin.
2) Calculate the offsetWidth and apply it on the wrapper div on every resize.
What didnt work:
1) Position absolute.
2) Floating everything to the left was a bad idea.
3) Leaving the scrollbar visible (Looks bad).
4) Overflow-y hidden makes things user unfriendly.
There are a lot of ways to go around this issue though normally you won't mind a little push to the left:
Give overflow-y: scroll to body and make sure always there is a scrollbar.
Make use of the fact that viewport width includes the scrollbar while percentages do not account for it:
a. Giving width: 100vw to body element, or
b. Giving margin-left: calc(100vw - 100%) to the html element so that scrollbar or not, you have a fixed area to work on.
There is even a deprecated overflow: overlay property that draws over the page instead of shifting it to the left.
Just give your body a width of 100vw like this:
body{
width: 100vw;
}
Even though all the answers above are correct, I stumbled upon this issue and I had to come up with another solution.
Since my content width takes up the whole page and it has some properties to justify in the center, it was being pushed to the left and these options didn't prevent it from happening.
What fixed the problem for me was to add a padding of the size of the scroll when the scroll is added on hover.
I tested on Chrome and Edge. It's not a perfect fix but it is enough for what I need right now.
.scrollable {
width: 100%;
height: 91vh;
overflow: hidden;
padding: 0px !important;
}
.scrollable:hover {
width: 100%;
height: 91vh;
overflow-y: auto;
padding-left: 16.8px !important;
}
Unfortunately there is no other way to prevent your problem.
Just use
body {
overflow:hidden;
}
As an alternative, I recommend you to use a Framework for custom scroll bars. Or disable the scrollbar as shown in the above snippet and emulate it with an absolute positioned and some JS.
Of course you will have to consider calculating the height of the page and the offset of the scrollbar thumb.
I hope that helps.
To disable the horizontal scrollbar, you can use overflow-x, so it won't affect your vertical scroll:
body {
overflow-x: hidden;
}
Just set overflow-x to hidden on the element that has the scrollbar (usually this would be the body or the immediate children of it).
I had the same problem on my nextjs app which already had overflow-x set to hidden on the body. The below solution worked for me
#__next{
overflow-x: hidden;
}
I would like to hide the scrollbar if the the user is not scrolling, meaning if the user scrolls, the scrollbar should appear (only the scrollbar not the scroll track), while if the user does not scroll it should disappear. I sort of had that setup for a long time, but than I made some changes to my page and now the page always shows the scrollbar (if there is more content than one page can cover). Unfortunately I don't know what I did to make this feature go away? I played around with overflow in the css, but overflow: hidden just removes all scrolling possibilities. Here is a fiddle which shows my current setup
https://jsfiddle.net/jsmnsLm7/ (please make the window big, so that you can see all of the features of my navbar setup)
as you can see I use
overflow: hidden
in the body and
overflow: scroll
in the main.
thanks for your help
carl
try following css:
overflow:auto;
It worked for me :)
This will do what you're looking for
http://rocha.la/jQuery-slimScroll
Or you could just show the scrollbar when you hover over the area using CSS only;
This worked for me;
<style>
#ID {
overflow-y: hidden;
}
</style>
#ID:hover, #ID:active, #ID:focus {
overflow-y: auto;
}
</style>
<div class="ID"></div>
There isn't a way to do this outside of a scripting languege as far as I know, but the JavaScript you use for this is super simple.
Start off with a CSS style of:
#ID {
overflow: hidden
}
Then in your div in the HTML use this command
<div id="ID" onmouseover="this.style.overflow='scroll'"
onmouseout="this.style.overflow='hidden'"
this will cause your scroll button to appear when the user hovers over the div, but then disappear again when the user hovers away from the div.
If you are using bootstrap, it is pretty simple - There is a default Scroll class to which you can apply the style overflow: auto.
<div class="Scroll" style="overflow: auto" >
.......
</div>
Based on this https://stackoverflow.com/a/40857678/15992537 answer I made this:
.categorias::-webkit-scrollbar-thumb {
height: 6px;
background: #ff3d1d;
border-radius: 10px;
visibility: hidden;
}
.categorias:active::-webkit-scrollbar-thumb {
visibility: visible;
}
this worked in my case because my div is draggable, so the thumb shows when i drag and move it, but with JS you probably can make it apear based on events like page scroll for example.
use overflow: auto
The overflow property has the following values:
visible - Default. The overflow is not clipped. The content renders outside the element's box
hidden - The overflow is clipped, and the rest of the content will be invisible
scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
auto - Similar to scroll, but it adds scrollbars only when necessary
I have a class js-drawer-open that gets applied to the body & html when a drawer is triggered to open.
.js-drawer-open {
overflow: hidden;
}
This works perfectly on desktop to prevent content outside the drawer from scrolling when the drawer is open. However on IOS this doesn't work as the element inside the body are position:absolute. The only way I could get it to work was with the following...
.js-drawer-open {
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}
But now my issue is if you scroll down the page and then open the drawer the page jumps back to the top of the screen which can be very frustrating for the user.
I think this is due to position: fixed being applied and I wanted to know if there is any way around this?
Any help would be much appreciated.
Maybe I'm missing something as you don't have a fiddle, but it sounds like your click event causes the jump to the top of your page. Take a look at: How to prevent a click on a '#' link from jumping to top of page in jQuery
I am currently building a website for Bearskin Group ....
The site is pretty much done, I am creating it with the GoDaddy online builder....
BUT - I have this stupid horizontal bar scroll coming up that id like to diasble...
I have tried using:
style="overflow-x: hidden"
&
div {
overflow-x:hidden;
overflow-y:hidden;
}
Can anyone help me remove this?
Thanks
Dan
This is because you are using huge width.
#wsb-element-233156931 .wsb-image-inner div {
height: 60px;
overflow: hidden;
position: relative;
width: 2904px; /*remove it*/
}
or
change overflow:auto to overflow:hidden in class wsb-canvas-page-container
Also I noticed you are using image (check below), can't you remove the image or use a background-color to fill the color.
<div class="customStyle"><img style="width:2904px;height:60px;" alt="" src="//nebula.wsimg.com/b7fd20f21ba2c36e5ef9f39ea2613e8e?AccessKeyId=D238BA178C5B0342ADD7&disposition=0&alloworigin=1"></div>
I ran into the same problem. It turned out to be an element that was sticking out with an invisible box. You can define page restrictions but if a shape, text box or element is protruding into the edges it automatically overrides your restrictions and creates more room. Eliminating these should shrink your page back down to normal and eliminate the horizontal scroll.