We Keep Coding

Scrollbar not visible on iOS application, it appears when start scrolling. Any resolution for this?

Scrollbar in iOS when start sliding. Here we have a list and sublist. When we select a list we will get a corresponding list sub list. if this sub list overflows we are not able to see scrollbar it appears only when the user starts sliding on the sublist. is there any solution for this?

Well, the question is if you really want to change this default behaviour. Most iOS users are used to it.
However, this should do the job. Add it to the concerning element. It kind of "overwrites" the default behaviour.
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

Scrollbar is different depending on where I am [duplicate]

WebKit/Blink's (Safari/Chrome) default behaviour on MacOS since 10.7 (Mac OS X Lion) is to hide scroll bars from trackpad users when they're not in use. This can be confusing; the scroll bar is often the only visual cue that an element is scrollable.
Example (jsfiddle)
HTML
<div class="frame">
Foo<br />
Bar<br />
Baz<br />
Help I'm trapped in an HTML factory!
</div>
CSS
.frame {
overflow-y: auto;
border: 1px solid black;
height: 3em;
width: 10em;
line-height: 1em;
}​
WebKit (Chrome) Screenshot
Presto (Opera) Screenshot
How can I force a scroll bar to always be displayed on a scrollable element in WebKit?

The appearance of the scroll bars can be controlled with WebKit's -webkit-scrollbar pseudo-elements [blog]. You can disable the default appearance and behaviour by setting -webkit-appearance [docs] to none.
Because you're removing the default style, you'll also need to specify the style yourself or the scroll bar will never show up. The following CSS recreates the appearance of the hiding scroll bars:
Example (jsfiddle)
CSS
.frame::-webkit-scrollbar {
-webkit-appearance: none;
}
.frame::-webkit-scrollbar:vertical {
width: 11px;
}
.frame::-webkit-scrollbar:horizontal {
height: 11px;
}
.frame::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
.frame::-webkit-scrollbar-track {
background-color: #fff;
border-radius: 8px;
}
WebKit (Chrome) Screenshot

For a one-page web application where I add scrollable sections dynamically, I trigger OSX's scrollbars by programmatically scrolling one pixel down and back up:
// Plain JS:
var el = document.getElementById('scrollable-section');
el.scrollTop = 1;
el.scrollTop = 0;
// jQuery:
$('#scrollable-section').scrollTop(1).scrollTop(0);
This triggers the visual cue fading in and out.

Here is a shorter bit of code that reenables scroll bars across your entire website. I'm not sure if it's much different than the current most popular answer but here it is:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 0 1px rgba(255,255,255,.5);
}
Found at this link: http://simurai.com/blog/2011/07/26/webkit-scrollbar

Browser scrollbars don't work at all on iPhone/iPad. At work we are using custom JavaScript scrollbars like jScrollPane to provide a consistent cross-browser UI: http://jscrollpane.kelvinluck.com/
It works very well for me - you can make some really beautiful custom scrollbars that fit the design of your site.

Another good way of dealing with Lion's hidden scroll bars is to display a prompt to scroll down. It doesn't work with small scroll areas such as text fields but well with large scroll areas and keeps the overall style of the site. One site doing this is http://versusio.com, just check this example page and wait 1.5 seconds to see the prompt:
http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb
The implementation isn't hard but you have to take care, that you don't display the prompt when the user has already scrolled.
You need jQuery + Underscore and
$(window).scroll
to check if the user already scrolled by himself,
_.delay()
to trigger a delay before you display the prompt -- the prompt shouldn't be to obtrusive
$('#prompt_div').fadeIn('slow')
to fade in your prompt and of course
$('#prompt_div').fadeOut('slow')
to fade out when the user scrolled after he saw the prompt
In addition, you can bind Google Analytics events to track user's scrolling behavior.

Element disappears only in Safari 10 (9 was ok), shows when I change any css

I have a bootstrap column containing a header div which is another bootstrap row, inside a React web app.
The container has the css:
height: calc(100vh - 14em);
overflow-y: hidden;
padding-left: 0;
padding-right: 0;
display: table;
border-left: thin solid #e6e6e6;
And the header row has the css:
border: thin solid #e6e6e6;
border-left: 2px solid #e0e0e0;
height: 6em;
margin-left: 0;
margin-right: 0;
display: table-caption;
This works perfectly in every browser except Safari 10.1, where it disappears when the other elements in the container column are shifted around (via React state). It was working in Safari 9, it only stopped working when I updated.
I've tried removing css properties one at a time, and adding "position: relative" as well as every overflow option, and nothing works.
I also tried looking up similar issues (elements disappearing only in Safari), and none of those have worked so far either.
But what's weird is if I change ANY css property in the browser, like if I remove "height: 6em" and then put it back, the div shows. If I start adding another css property, the element shows, before I even finish typing.
I'm pretty sure this is a bug in Safari, since it wasn't a problem in 9 or in any other browser... how can I get it to force an update, or better yet not need one?

You can try setting -webkit-transform: translate3d(0,0,0); on the element to force GPU processing. That worked for me on a similar issue.

Here's the technique I use when I encounter this nasty bug in Safari.
I basically force a redrawing of the element with a css animation loop:
#keyframes forceRedraw {
from { box-shadow: inset rgba(0,0,0,0) 0 0 0; }
to { box-shadow: inset rgba(0,0,0,0.0000001) 0 0 0 10px; }
}
.container{
width: 100px;
height: 100px;
background-color: red;
animation-name: forceRedraw;
animation-duration: 4s;
animation-iteration-count:infinite;
}
Hope this helps!

I managed to move the offending element into the component below it, since that component was being redrawn each time its state changed. I didn't think I could move it at first but I figured out a way. I guess there's still a bug in Safari, but anyway I found a way around it.
And anyway, if it were necessary toggling a style change several times in a row (loop w/ a timeout) is ugly and horrible but it keeps the element visible, and at least you can limit it to Safari 10:
if (navigator.userAgent.indexOf("Mac OS X 10") > -1
&& navigator.vendor.indexOf("Apple") > -1) {

iPhone-like jQuery Scrollbar

I'm trying to find a jQuery scrollbar that looks like the one of the iPhone: a simple black bar without the up or down buttons. I've found a few scripts but most tend to do so much more than I need. I basically have a div with a fixed height that is set on overflow:auto to which I would like to apply this scrollbar. Help would greatly be appreciated!

Matteo Spinelli has an iPhone-like scrollbar inside of his iScroll library. You should try looking into whether or not you can adopt it to your needs.

What are your browser requirements?
You should try to avoid javascript solutions since they will increase the complexity of your page. If a third-party scrollbar javascript library breaks, you will have to debug it yourself (been there, done that).
Chrome has full support for CSS3 scrollbars, something like this should make an iPhone like scrollbar
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
IE allows styling scrollbars with vendor specific tags, but its very limited. e.g.:
scrollbar-base-color: #663366;
scrollbar-face-color: #99CCCC;
scrollbar-track-color: #996699;
scrollbar-arrow-color: #330033;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #CCCCCC;
scrollbar-shadow-color: #663366;
scrollbar-darkshadow-color: #000000;
Here is a jsFiddle with the styled scrollbars:
http://jsfiddle.net/APmLZ/3/

Iframe Scrollbar css

How do I go about changing the css of an iframe scrollbar?
My problem with the current scrollbar in my iframe is the frame is not very wide and the scrollbar appears bulky in it and takes up too much space.
Using "scrolling="no" makes the scrollbar disappear but then the user cannot scroll.
By the way, My browser is Google Chrome.

This is the css to change the scrollbars in iframes in chrome
body {
position: absolute;
overflow-y: scroll;
overflow-x: hidden;
}
html {
overflow-y: auto;
background-color: transparent;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
display: none;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
height: 30px;
background-color: transparent;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 16px;
}
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #666;
border: 1px solid #eee;
-webkit-border-radius: 6px;
}

You can make it by getting scrollbar element in the frame, for example use jquery:
$("#iFrameId").contents().find("-webkit-scrollbar").css("width","5px")
But as others said - it's not a pretty solution.

You can't style a scrollbar (other then to turn it on and off) with CSS at all.
There is some proprietary stuff which lets you apply some styling, but this is supported only by IE and Opera.
Chrome provides no mechanism to do this.
As a commenter points out, WebKit now supports a different proprietary mechanism for styling scrollbars. I've no idea if the Chrome build of WebKit has this merged or enabled though.
You could look at replacing the scrollbar wholesale with JavaScript, and jScrollPane appears to do a reasonable job of not breaking the usual interaction rules.
That said, changing the appearance of user controls is something I'd try to avoid, and making something users need to aim a pointer at smaller sets off the flashing red light marked "Fitts's law".
A better solution would probably be to "Not cram so much information into so little space".