I'm trying to create a vertical timeline but I can't seem to get the overflow-y: scroll to work. Here is a link to the website:
http://fosterinnovationculture.com/infographic/index.html
The parent div has an overflow: hidden but the child div has overflow-y. It works properly if I remove the parent div but I need it inside of the div so that list.js plugin works properly.
I see your code have
html, body {
overflow: hidden;
}
// it mean only full screen and all overflow is hidden.
So in .scroll you need set max-height. I suggest a solution
.scroll {
max-height: 90vh;
}
You fixed the height of body to 100vh and set it's overflow property's value to hidden;
So not matter whatever the height of body's child is, it will not scroll;
If you change body's overflow property to auto, scroll will work;
At the same time you may change the position of top_nav to fixed, in order to keep the search bar at the top all time time.
It seems like you are repeating the same question. Here is you asking about the same problem (though I will admit the question is different because it has changed). Here is my answer to that question.
Before giving an answer, I will say that the most important thing I tell myself when coding CSS is: if I start having to hack then I am making it too complicated.
With that said, start by removing every instance of overflow: hidden; in your code.
Then get this in there:
.top-nav {
height: 70px; /* you already specify this on your site */
}
.scroll {
position: absolute;
top: 70px;
bottom: 0px;
left: 0px;
right: 0px;
overflow-y: scroll;
}
In cases like this, you should try to realize that your question regards a design that is common and someone else must have asked your question before. If you cannot find an answer to such a question, it may be good to rethink your search keywords.
Here is a Stack Overflow question that answers your underlying "how-to" design question.
Related
I'm working on my first project, which is supposed to become a blog one day. I'm currently trying to design the homepage, and, until a certain point, everything was pretty fine. But then something happened and an overflow appeared. I don't know what causes it. I'm using box-sizing: border-box just to be sure there are no hidden borders or margins or padding causing this problem, but it's still there.
By the way, my aim is to make the page responsive, that's why I'm trying to use scalable width and height as much as possible. Maybe that's where the problem lies?
width: calc(100vw); max-width: 4000px;
height: calc(5vh); max-height: 112.5px;
Here's the fiddle: https://jsfiddle.net/u7vqz0cq/
Any ideas?
Sole reason of overflow here is use of 100vw. As soon as you set the width of some block tag, it will have a overflow. Similar is the case with 100vh. It makes the tag overflow vertically.
And using calc(100vw) is also pointless, instead you can use 100% if required like this.
#header {
width: 100%;
max-width: inherit;
height: calc(5vh); max-height: 112.5px;
}
Here is the updated jsfiddle.
https://jsfiddle.net/u7vqz0cq/1/
I've asked this question before. Here is an original post.
We've found a solution but I would like to ask is there any chance to solve this in another way?
Original fiddle link with that issue.
Could someone explain why element with display:block; or even with dipslay:flex; or any other display type (except table) does not take the width, hidden under scroll?
It's a bit confusing me.
When using width 100% it will want to stretch to the size of its container, if you have more content than space, try adding overflow: scroll; it will add a scrollbar and attempt to keep the width you set it at stable.
.pane .body {
width: 100%;
overflow: scroll;
}
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;
}
so I made a website but for some reason no matter what I do, I cannot get any scrollbars to appear when the page is too small. I've been looking for quite some time but can't find a solution. I've tried many things but can't figure it out for the life of me. I suspect it has something to do with overflow but even adjusting that doesn't seem to work. If anybody could help me diagnose this, I'd really appreciate it. I'll go ahead and link the relevant codes below. I know it's probably a simple problem, but I'm about to rip my hair out trying to figure it out. Thank you for any help, I really appreciate it.
Main index page: http://pastebin.com/TkdzdKbG
CSS Style: http://pastebin.com/tMKQtC6v
Apply this CSS
.ibg-bg {
height: 100% !important;
position: absolute;
}
Remove position
.bg {
height: 100%;
/*position: absolute;*/
width: 100%;
z-index: 0;
}
I'm not sure if it's the solution you're looking for but in your "container" div, there's an inline style "overflow:hidden", if you remove that, you can get scrollbars whenever the page is too small.
http://prntscr.com/8pcd0f
I think this is because of overflow property. Try this on your stylesheet,
.container .bg {
overflow:scroll !important;
}
Most of your contents are under div.bg > div.display but the height of the parent node-div.bg- is 100% and its overflow value is set hidden by one of the scripts. (query.interactive_bg.js, I guess)
You can set the height of div.display to 100% and its overflow-y value to scroll to scroll the contents or if you want a horizontal scroll bar as well, change overflow-y to overflow.
Add these line to your style.css file, line 172:
.display{
position: relative;
height: 100%; /* Added */
overflow-y: scroll; /* Added */
}
I have just completed the following website but when I load it I seem to have an excess scroll.
Could you please give me feedback as to why and how could I resolve this issue.
I can post the code here but most people from the previous questions I have had over the last couple of days like a working example
So, the NAV element in the footer had a negative right margin, which caused a horizontal overflow, which in turn caused the scroll-bar to appear. I guess, your intention was to move the nav-items further to the right.
To get rid of the scroll-bar, just remove the negative margin, and instead set the width of the NAV to the appropriate value.
Try to add following line to your wrapper
overflow-x: hidden;
Try adding this css property to your <div id="wrapper"> element:
overflow-x: hidden;
Check this link for the official documentation of the overflow-x property.
Your css should look something like this:
#wrapper {
width: 100%;
height: 100%;
min-height: 100%;
position: absolute;
overflow-x: hidden;
}
I've tried it in Safari(version 5.1.7), Firefox(11.x) and Google Chrome(19.x) on a Mac Os and it works like a charm.
Hope it helps!