Is there anyway to style, modify, or remove the scrollbars of a scrollable html div?
I believe your only option is to remove the scrollbars altogether with CSS.
#your_div {
overflow: hidden;
}
The scrollbars themselves are a "browser thing", and as such can't be styled.
EDIT: If you are willing to use "fake" scrollbars--i.e., they aren't actual browser scrollbars they're an HTML element created with Javascript/jQuery that work "like" scrollbars--then you can use Jscrollpane.
The scrolling looks surprisingly smooth and nice, but I would worry some about how it might work in more novel environments--i.e., a touchscreen interface.
Demos of JScrollpane.
There are IE only scrollbar CSS styles:
scrollbar-3dlight-color,
scrollbar-arrow-color,
scrollbar-base-color,
scrollbar-darkshadow-color,
scrollbar-face-color,
scrollbar-highlight-color,
scrollbar-shadow-color
Scrollbars can be styled, either by using css:
Scrollbar styleing with css
And/Or with javascript:
Scrollbar styleing with javascript
10 jQuery Custom Scrollbar Plugins
Related
Some websites currently break functionality by placing overflow:hidden style into html and body tags to bully users into having lots of unwanted garbage displayed. As a user, how can i best override that?
Only talking about those two tags, where a site controlling overflow is nearly always doing so maliciously.
you could alter that from your browser's dev tools like inspect
You can use Devtools or try make or Found some plugin who change the overflow:hidden in browser or you can use Python i think.
Try putting an overflow-y: visible !important; in the body & html tags, that's to keep the y-axis with a scrolling functionality.
And if you don't want scrolling sideways on phones and tablets then add as well overflow-x: hidden; to both the body & html tags alonside with a position: relative; for the body tag, too
In a website I am making, the scrollbar is messing up the horizontal alignment of my page, so I can use ;
html,body{
overflow-y:hidden;
}
But how can I still let the page scroll (just without showing the scrollbar)?
If you want a pure CSS solution than below snippet will help you achieve that with an ease
::-webkit-scrollbar {
display: none;
}
Demo (Only Chrome or Safari)
But since this is for webkit browsers only, you might have to use JS for a cross browser solution.
I think disable the scrollbar is not the solution, because in that case, you will need to find another solution to actually scroll the page...
like up & down keys, or make a mouse selection and go down...
...which is not an elegant solution in my opinion.
(not to mention that only will be affected webkit based browsers)
Instead, I suggest to fix your style so then the scrollbars will not screw up your layout.
One approach (without knowing your code, only guessing) is to use the box-sizing attribute.
Like:
#id {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
}
So with this, the width that you are giving to that #id will be recalculate when the margin, padding or the border changes.
But again.. only guessing, if you want to show the code that is affected by the scrollbars, we can find a proper solution for this.
When a user perform a search on my website I want to show the result in a small div with vertical scrollbars instead of that the user need to scroll the full page. That works perfect in all browsers BUT I get problems on the iPad. I can see that the search result doesn't fit into the div but no scroll bar is showing up on the iPad. Also when I try to scroll inside the div the full page is scrolled instead. Is there a solution to get this working?
HTML AND CSS:
<div class="searchResult">
//Here I show the search result
</div>
div.searchResult
{
height: 540px;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
I believe the answer is that you cannot scroll unless you use the two-finger methods. However if you look at the last link, there is a workaround.
Issues:
CSS Overflow property not working in iPad
http://www.webmanwalking.org/library/experiments/dsp_frames_outer_document.html
Workaround:
http://cubiq.org/scrolling-div-on-iphone-ipod-touch
iScroll is the jQuery plugin that tahdhaze09 mentioned. And to be more specific:
iScroll is evolving and adding many new features to the basic
scrolling functionality. If all you need is the plain old scroller for
mobile webkit, you should really use iscroll-lite.js instead.
iscroll-lite.js is part of the iScroll package. It looks as if it will solve the one-finger scroll problem quite nicely.
For some odd reason changing the div to a span works on an iPad.
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.
Can we change a scroll bar styling, Instead of default scroll bar, I want to place a image on it.
No.
IE allow change color of some scrollbar elements. But other browsers - NO.
The only solution is use custom JS to implement this. But this is always more ugly and non-useful instead of native controls.
Take a look at: http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
See if this works for you - flexScroll
This does not place an image over the scrollbar, it creates a virtual scrollbar. I don't know if it is possible to gain control over scrollbar using html/js.
You can't use an image for the scroll-bars, but you can change the colour of them. See this page for information on how to do it.
Be aware that the scrollbar properties are not valid CSS, and not all browsers will obey the style of the scrollbars.
Just found a link for the similar effect,hope it helps..
[http://www.hiddenpixels.com/javascript/custom-javascript-scrollbar/][1]