I'm using CSS smooth scroll - which is triggered by clicking a div.
Now I want to disable manual scrolling, so you can only scroll by clicking that div and not by actually scrolling.
Is it possible? Thx.
CSS overflow property can help the situation.
Give,
overflow-y:hidden;
This will resist the scroll event over the section you are providing overflow hidden.
Please provide the overflow:hidden to the required section alone, so that it will not affect the other part of the page.
Using this little snippet below, you won't be able to scroll and the scroll bar wont be visible.
body {
overflow-y: hidden;
}
using ::-webkit-scrollbar isn't a possibility because you will still be able to scroll.
Related
I have created a top scroll bar. So when you make the panel smaller you need to scroll to see the rest of the menu.
This works fine on Safari on the Mac and on Google OS BUT not on a Windows computer, Instead, you get a nasty grey scroll panel at the bottom of the blue panel.
Is there a way to get rid of this please but still be able to scroll as shown in the example.
Hope you can help
Thanks
Tim
/Users/timcross/Desktop/111111.png
I cannot turn off overflow-x: scroll as I need this to scroll so not sure how to get around this
https://jsfiddle.net/timcross/hf8byg2r/
scroll panel is always visible because of the CSS property overflow-x and the overflow-y property has the value of "scroll",
this consider as the block always needs scroll,
you can change it to auto, then it will consider the correct behavior and add scroll panel if needed.
overflow-x: scroll;
Change to
overflow-x: auto;
same for the overflow-y
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.
Hello stackoverflow users,
Today I am using the overflow:scroll; property so I can hide all content but allow users to see it with a scroll bar.
See below picture:
You can see that the scroll bars appear even when not needed. Is there a way I can hide the scroll bar until needed, ie when there is actually overflowing content. It is a cosmetic issue for me as the scroll bar at the moment are naturally locked since there is no overflowing content, so why display it (I would prefer it not to be displayed just in case others have different opinions).
Regards
You can use overflow:auto instead of overflow:scroll
With overflow:scroll http://jsfiddle.net/0wekc9p2/1/
with overflow:auto http://jsfiddle.net/0wekc9p2/2/
I would suggest you to set overflow property to auto. or remove the property altogether if it is not inherited.
In your CSS put this code within body tag
body {
overflow:hidden
}
I have a div that has a lot of content and hence scrolls.. How can I hide the scrollbar such that it is not visible. EDIT: I do want scrolling to work! So.. Scrolling with no scrollbar?
eg
.scrolling_div {
overflow:auto;
/*something else to hide the scrollbar?*/
}
Ok, I spent sometime to write minimal code.
Check DEMO. Mouse over the div and scroll to see the scroller.
Note that this using an external plugin to listen to mousewheel event.
DEMO page for the plugin
overflow:hidden should hide the scrollbar.
.scrolling_div {
overflow: hidden;
}
overflow can take any one of the below values,
visible
Default value. Content is not clipped, it may be rendered outside the content box.
hidden
The content is clipped and no scrollbars are provided.
scroll
The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment.Printers may print overflowing content.
auto
Provide scrollbars if content overflows.
Reference
overflow: auto; means "show a scrollbar if necessary". Change it to overflow: hidden; to disable scrolling.
EDIT: Okay, you want to make a custom scrollbar. Then see this sample jsFiddle for how to get started - it includes mouse wheeling and dragging of the scrollbar.
You can try this:
html {
overflow: hidden;
}
it will remove the scrollbar from all the window.
Otherwise if you need it only on a specific div:
.scrolling_div {
overflow: hidden;
}
Use a wrapper which covers the element you want to be scrollable without a scrollbar, and let the wrapper be narrower than the element to scroll, in the horizontal basis. This is what I mean: http://jsfiddle.net/FlagelloDiDio/EdgTt/
It really depends on what you are going for. see here
overflow:hidden; may be what you want.
If you want to dip into css3, you can play with overflow-x and overflow-y for even more options.
The only way to hide the scrollbar is to make the content non-scrollable and just cut off if it exceeds the height (overflow: hidden). Honestly, why would you want to have a page that is scrollable that doesn't have a scrollbar? That would confuse the heck out of any visitors. There's no way you can do this with CSS.
As far as customizing the scrollbar, there are JavaScripts out there to do that. But make sure that if the user has it disabled, they can still properly scroll the page without it.
When I was studying the overflow property's values, I came across these two values: auto and scroll, which adds scrollbar(s) if the content overflows the element.
Could someone please explain me whats the difference between them?
Auto will only show a scrollbar when any content is clipped.
Scroll will however always show the scrollbar even if all content fits and you cant scroll it.
overflow: scroll will hide all overflowing content and cause scroll bars to appear on the element in question. If the content does not overflow, the scrollbars will still be visible, but disabled.
overflow: auto is very similar, but the scrollbars only appear when the content is overflowing.
There is a similar explanation of this here, with some screenshots to illustrate the point.
Take a look at CSS Tricks.
Auto will show scrollbar if and only if the content overflows; but scroll will always show the scrollbar, whether the content is overflowing or not.
Adding a point to the answer, Overflow:auto not worked in IE7 when position of the container is absolute Position relative overflow IE7. But setting Overflow:scroll works
overflow: scroll will show both horizontal and vertical scrollbar even when you don't need one or other. while, overflow: auto will show the scrollbar which your div needs. so basically auto will help you to get rid of both scollbar.
Here is more of that:
https://css-tricks.com/the-css-overflow-property/
In Windows, overflow: scroll will always show the scrollbar and overflow: auto will show the scrollbar only if the content is overflowing. In macOS, the overflow: scroll and overflow: auto will always show the scrollbar if the content is overflowing. Tested in Chrome. I highly recommend using overflow: auto as it works the same way and does not generate problems in windows