Pure css way to prevent scrollbar pushing content to the left? - html

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;
}

Related

Div Card Elements Won't Scroll

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.

HTML reserve space for scrollbar

I have a div that may overflow as content is added or removed.
However the UI designer does not want a visible, but inactive scrollbar (as with overflow: scroll), and they don't want the content layout to change when one is added and remove (as with overflow: auto).
Is there a means to get this behavior, and considering the different scrollbars on different platforms and browsers.
https://jsfiddle.net/qy9a2r00/1/
No browser support this property yet (2021), but scrollbar-gutter is a suggested solution for this.
Update: 2022 - all modern browsers except Safari support the property.
The only way to do this is to make the width of the items in the container fixed. And you'll have to be conservative with the width of the scrollbar.
.container {
width: 200px;
height: 200px;
overflow: auto;
overflow-x: hidden;
border: 1px solid black;
}
.item {
width: 200px;
...
https://jsfiddle.net/fr1jnmn6/1/
overflow-y:overlay would be a partial solution to this as in, it solves the problem of not wanting the content layout to change when a scrollbar is added or removed. Extra padding or margin can be added so that scrollbar doesn't obfuscate the div behind
Here's the jsfiddle for the same https://jsfiddle.net/kitwradr/2qcsj6hw/
One cannot know how thick the scrollbar is, using only HTML & CSS and thus do not know the width of the (blue) placeholder.
You might solve such a task using scripting. Force a scrollbar in a hidden container and measure the inner and outer width. The difference being the scrollbar-width. Set this width (e.g. as CSS) to the placeholder element. And in the tricky part hide this element whenever a scrollbar is shown.
The usual solution to this problem is the one you do not want.
You can setup overflow: scroll to reserve space for scrollbar and add a class that makes scrollbar hidden
body {
overflow-y: scroll;
}
Hide the scrollbar by adding class to div (or to body) that will make your scrollbar transparent
.scroll-hidden::-webkit-scrollbar
{
background-color: transparent;
}
.scroll-hidden::-webkit-scrollbar-track
{
background-color: transparent;
}
To check if you have content overflow you can use this lines:
const { body } = document
const overflow = body.scrollHeight > body.clientHeight
If there are no overflow issue we will hide scrollbar and with reserve space
body.classList.add('scroll-hidden')
If content overflow we will show scrollbar
body.classList.remove('scroll-hidden')
Try the solution here https://jsfiddle.net/ycharniauski/y0pwftmq/
It's a bit hacky solution. Hope in future css will have some property to reserve space
You need to have a parent div with a fixed width (the final total width) and a child div with a width 16px smaller.
Then the scrollbar will have 16px free in the parent div.
The width should always be a number (can't be relative value). In the child div, you need to use a number as well. You can't do calc(100%-16px).
<div className="user-list">
<div className="user-list__content">
{content}
</div>
</div>
.user-list {
width: 500px; /* total width */
height: 1000x;
overflow-y: auto;
}
.user-list__content {
width: 484px; /* must be 16px smaller */
height: 100%;
}
This is an ancient question, but in case anyone comes looking.
Detect the scrollbar and show/hide your blue section based on the scrollbar being visible. If scrollbar is visible, HIDE your blue sections (apply a style). If not visible, show your blue padding section.
When the scrollbar becomes visible your padding hides, so the red and green sections will not change size or position.
This article below discusses detecting the scrollbar. You will want to set up a div somewhere to detect the current scrollbar width ahead of time in order to set your blue boxes to the same width.
How can I check if a scrollbar is visible?
Maybe append a div at the bottom will soft your problem ?
https://jsfiddle.net/moongod101/k7w574mw/1/

How can I get things properly contained in a wrapper div?

At cjshayward.com/index_new.html, there is a wrapper div around the body's content, about 1000 pixels wide, and it works as intended for the top 100 or so pixels in Chrome and Firefox. Next down the page is a jQuery UI set of tabs, containing a fixed-width accordion and something close to jQuery.load()ed plain old, simple HTML.
However, on the "Browse the Library" tab (but not "About the Author"), which is presently open and which contains the fixed-width accordion, below 100 or 150px down, the area under the tabs appears to have the same width as the window; it has the correct left margin, and horizontally scrolls an apparently equal distance to the right. Furthermore, the body background tile does not display; the whole width is white, as was specified for the wrapper div's interior.
How can I get the "Browse the Library" tab to display as intended (like the "About the Author" tab does)?
Thanks,
You're absolutely positioning way too much and that's ruining the flow of things. I'll go through a list of edits you can do to make this work.
/*
#accordion and #details will be floated, so we'll need to
clear #tabs. Add this property.
*/
#tabs {
overflow: hidden;
}
/*
Remove the absolute positioning from #accordion, along
with the top and left properties and do this instead.
*/
#accordion {
float: left;
width: 400px; /* This already exists */
margin: 0 10px 0 0;
}
/*
Remove the absolute positioning from #details, along
with the top and left properties and do this instead.
*/
#details {
float: left;
width: 580px;
}
This will get you a lot closer. You should also try to avoid using height on these elements. Let the content dictate the height.
Here is what i ended up with making those edits: http://i.imgur.com/niizuoR.png
Okay lets make a step by step solution (watch for the edits).
Background
Your background is set in the body. So the body needs to be extended to fill the whole page.
I would recommend this way but there are others.
body,html{
height:100%;
}
Normally the body would fit its contents but with position:absolute this mechanism doesnt work anymore.
Also remove background: #fff css (normalize.css) from the html.
html {
background: #fff;
color: #000;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
Also your background scrolls with your content. Set background-atachment: fixed to change this.
Wrapper
Same counts dor your wrapper which holds the white background.
Set its height to 100% too.
div#main {
height: 100%;
}
The reason why your content is bigger than your wrapper is that
<div id="details" style="width: 713px; height: 0px;">
this div holding the content has a fixed size set. Removing that size make it fit the wrapper.
The width seems to be set per javascript in the load event, so I cant help you with that. Provide your .js code and may i can help you with that too.
As stated in the comments, your layout issues are based in your use of absolute positioning rather than flow layout:
I went through your site and quickly switch everything so it was positioned statically (width floats, not absolute values) and this cleared up the issue. There were some other issues as well. You probably need to look over how you are setting up your HTML from the top level on.
I would start out again and concentrate on using floats for your layout, rather than absolute positioning.
For a basic example on doing so, here is a super simply page: http://cdpn.io/kmCFy

How to prevent horizontal scrolling on responsive webpage?

I'm using twitter bootstrap to make my app responsive. When I shrink the width of my browser window to the minimum size or view the page on a mobile device (iPhone, example), the user is able to scroll horizontally. The amount of horizontal scroll is small but I would like to remove it all together.
I believe it's due to the img container that I'm including, but I'm not here. The page's html is located here: http://pastebin.ca/2347946.
Any advice on how to prevent the horizontal scroll for the page while still maintaining the scrolling in the img container?
I had the same problem, and applied this to fix it:
body {
overflow-x: hidden !important;
}
.container {
max-width: 100% !important;
overflow-x: hidden !important;
}
To expand a bit, I only had the problem on mobile phones, so this is my final code:
#media screen and (max-width: 667px) {
body {
overflow-x: hidden !important;
}
.container {
max-width: 100% !important;
overflow-x: hidden !important;
}
}
I found the issues regarding this on Github, so I guess newer versions of Bootstrap have been patched.
i am pretty sure somewhere one of your child element is exceeding the width of its parent element. Check you code twice, if there any box-size of inner child elements is large because of one of the reasons like- when the box width including margin, padding, border go beyond the limit. And we possibly haven't added overflow: hidden; to its outer parent element. In this case they are considered reaching beyond their parent element and browsers show it with the scrollbar. So fix it via removing extra margins, paddings, borders or if you just don't want any headache, just try to add overflow:hidden; to the outer box.
The "overflow: hidden;" style is the remedy not the prevention.
If you want to prevent this you have to check your body elements which is larger than the body.
It happens when you take a div with some "padding" or "margin" outside ".container" class (twitter bootstrap).
So remove all padding and margin outside the container class.
It turns out I had zoomed in more than 100% that was causing the page to scroll. Cmd+0 helped bring the zoom to 100% which got rid of the scrolling.
Try to add (in the relevant #-rule) a max-width:
img {
max-width: NNNpx;
}
That'll prevent img from being too wide.

Centered div changes position when scroll shows up

I have a div container which is centered (by margin-left:auto and margin-right:auto) and page design looks fine when loaded...
Below this div there is another hidden one, which shows up on user request.
But when this happens browser scroll shows up and mess up my design because centered div also moves few pixels to the left (so it can again be in the center).
Can this behavior be stopped?
Alternative solution is adding overflow-y:scroll but I found that overflow-y is not supported by all browsers and I can't find by which browsers...
Can somebody post a link where I can see browser support list for css3 functions?
With scroll always being shown, maybe be not good for layout.
Try to limit body width with css3
body {
width: calc(100vw - 34px);
}
vw is width of viewport (see this link for some explanation)
calc calculate in css3
34px stands for double scrollbar width (see this for fixed or this to calculate if you don't trust fixed sizes)
This css will always show vertical scroll on your page.
body {
overflow-y: scroll;
}
By default it's overflow: auto;