I put a text in a div with a vertical scrollbar. I would like to hide this bar. On Google Chrome no problem but on firefox it is visible. How to do?
thanks
Custom scrollbars are not supported in Firefox or IE/Edge.
https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp
You can hide it with overflow: hidden
There are some usefull tips about your question:
How to hide scrollbar in Firefox?
In this topic are many answers on this question, i suggest you to choose this one which fits your needs.
Related
I'm looking for a way to make the scrollbar invisible in Firefox. That is, you shouldn't be able to see it, but you should still be able to scroll. For other browsers, this works:
::-webkit-scrollbar {display: none;}
However, it seems that this feature has been removed from Firefox. Surely someone has found a workaround just for Firefox?
If you want to hide scroll bar, you will need the CSS
<body style="overflow:hidden;"> ...</body>
I am wondering, if scroll bar will not be available to your page, how your content is going to be read fully. By the way, this CSS works will all elements like <div></div> etc. too.
For scrolling you will need to add scroll event. Take a reference from here for scroll event handling.
http://www.newpathwaysretreat.com
I have been informed that this site is not working properly with IE8, the navigation bar is not showing up and the links which normally go across horizontally are now just an unstyled list in the top left corner.
Any help would be appreciated!
thanks
The navigation bar's styles are wrapped in #media screen which IE8 and below basically do not understand.
The <nav> tag isn't supported in IE8.
http://www.w3schools.com/tags/tag_nav.asp
Basically if a tag was added in HTML5 assume that IE8 isn't going to support it. That's part of the reason there's an IE9.
I have a facebook like-box on my site, and i want to style the scroll bar that appears in the iframe. But i cant seen to find a way to do it. Anyone knows how its possible, or if it even ARE possible.
Thanks in advance
plz go through this link http://rocketpopmedia.com/discover/2010/06/02/how-to-style-the-facebook-like-box-using-css/
I hope this is actually what you want
EDIT:
the question is already discussed in stckoverflow you can check this out Can you style an iframe scrollbar without access to the iframe's css?
You can use this technique to style the scrollbar, however it only works in WebKit browsers (Chrome & Safari)
You can always simulate some scroll control with css.
I need to change the color of a scrollbar button when the mouse moves over it which is at top and bottom (left and right) of scrollbar. How can I change it in WebKit? When I use hover, it is not working. Please help me.
You may or may not be able to change the hover styles on scrollbar buttons as this is browser-dependent. Namely, no known browser has hover styles for scrollbar buttons.
EDIT: thirtydot points out that scrollbar button hover styles are on their way to WebKit's implementation; see his comment for a demo.
You specifically said "how can i change it in webkit", so:
An older answer of mine: Apple-like scrollbars using CSS
Apple's version: http://help.apple.com/mobileme/index.html#mm5b08c671
Live Demo (tested in Chrome
dev, Safari 5)
Some useful blog posts:
http://webkit.org/blog/363/styling-scrollbars/
http://numerosign.com/notebook/styling-webkit-scrollbars-with-css3/
http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task
Note that it's rather time consuming to:
Get it right.
Make it look good.
It does looks very slick on Apple's help site, so it may be worth the effort.
So, is possible to change color on a scrollbar, but u have to consider that most browser don't like these css..
body {scrollbar-3dlight-color:#ffd700;
scrollbar-arrow-color:#ff0;
scrollbar-base-color:#ff6347;
scrollbar-darkshadow-color:#ffa500;
scrollbar-face-color:#008080;
scrollbar-highlight-color:#ff69b4;
scrollbar-shadow-color:#f0f}
Otherwise you can use Jquery for personalize you scrollbar.
Look at this link: http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
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.