I have a page I'm working on that encompasses a vertical drop-down menu. However, when the menu drops down, it pushes the text below it downwards and off the page. This is expected, but this enables the scroll bar on the side of the page. I was wondering it there was a way to get rid of this. In other words, it shouldn't just not scroll, but never even offer the option to scroll.
Thanks!
If you want no scrollbar to appear and no scrolling whatsoever to occur, in the CSS for the div in which you contain said dropdown use
overflow: hidden;
This will cut off any 'additional content' though; see an example here
Use overflow: hidden; on the element you want to hide the scrollbar on.
Related
I am trying to make a scrollbar appear only when a user hovers over the component. The problem is that the scrollable element has a cutoff on the side of it when it is hovered compared to when it is not, like in the video below
This is the css I am using to make the scrollbar appear when it is hovered over
.scroll-on-hover:hover {
overflow-y: scroll !important;
}
And then it's applied like
<div style="position: fixed;" class="scroll-on-hover">
<nav style="background-color: navy; height: 100%;" >
...
</nav>
</div>
It happens because you are forcing it to show the scroll bar.
It is the expected behavior, a scroll bar will always occupy and overlap the content.
As you say:
I am trying to make a scrollbar appear only when a user hovers over the component. ...
There are two problems:
By making it just scrollable or not, you are not showing or hidding the elements.
The :hover works only on desktops, mobile cannot do that.
For the first problem, I encourage you to use "play" with display, translate, or any other prop that actually can hide and show the elements.
For the second, a similar approach can be :active, it's when you click and touch on mobile, instead of :hover that works only for the desktop mouse.
Edit
What you are looking for, is not a native scroll bar, it is a div, actually a lot of them and a huge peace of functionality.
Facebook is making a mimic of a scroll bar, a custom one, and for sure it's way more complex than an overflow-y style.
My page layout features a header and a main element. I set the main element via css to overflow: auto, so that a scroll bar appears whenever the content is larger than the screen.
However when I press Ctrl+F to toggle the browser search and search for something, the results on the page are highlighted as usual but the "minimap" of search results in the scroll bar that usually is there is missing.
I can bring that "minimap" back when I remove the overflow: auto from the main element, however that makes the scroll bar go over all the page and not just the main element as I would prefer to.
I tried this in current versions of Chrome as well as Firefox and both show the same behavior.
This element is the only scrolling one and the scroll bar is on the very right of the window - it just starts below the header element, which I find aesthetically much more pleasing.
Is there any way that I can bring the search result highlighting "minimap" back to the scroll bar?
You can customize the default webkit scrollbar using css, javascript but it won't be easy to customize. Custom scrollbars come in handy in this case.
You can use the npm package rc-slider and customize the scrollbar based on your requirement. Here is a working example of the scrollbar which highlights clickable markers at every 6th row.
I have a header on the top of my web site and links on that. Clicking on the links brings up new pages below.
Some of the pages have a lot of text and others just a small amount. The result is that some pages appear with a scroll bar and others without. It looks very distracting to see the scroll bar appear and then not appear as I move from page to page.
Is there a way I can ensure there is always a vertical scroll bar present?
body {
overflow-y: scroll;
}
Use overflow-y: scroll on whatever element you want to always have a scrollbar
Yes, the CSS rule for this is overflow (also available as -x and -y)
body {
overflow-y: scroll;
}
Other values are for example auto (only when needed, default), hidden and visible.
I've got a site with 3 pages, one of which has a scrollbar. When switching between a page without and the page with the scrollbar, the navigation bar changes places, and the transition looks terrible. This is because I have a css/div-based layout, and it centers itself on the window. So, since it will only be covering white space, is there a way to make the scrollbar sit on top of the page, instead of shrinking the page to be next to it?
No, you can't place the scrollbar over the page, but you can force it to be shown on all pages, so there will be no jumps:
html {
overflow-y: scroll;
}
I have been struggling for several hours about this problem, although it seems ridiculous I cant fix it somehow.
So this is the webpage draft, http://www.mysecretathens.gr/Sera/test.html
If you click on the Bio link, you will notice that the topbar menu on the Biography.html is moving slightly to the right.
How can we fix that? Any ideas?
p.s I have noticed that If I have the same picture in biography.html as in test.html there is no problem, the topbar remains in the saim position.
html{
overflow-y: scroll;
}
This forces a scrollbar on the right hand side
That's because your first page has a scroll bar and the bio page doesn't. You can force a scrollbar to always show up which can be annoying but consistent, or use absolute positioning to have the content always appear in a specific location, albeit probably not centered.
The content on the first page is going below your screen, meaning you will have to scroll. This isn't the same for the bio page, hence the inconsistencies, either add more content, set overflow-y to scroll or just ignore it (as users will)