Need a simple custom scrollbar - javascript

I have a div that is overflow-y: hidden; overflow-x: auto; and rendering a scrollbar exactly the way I want. I have all of the scrolling functionality and everything I want perfect already. Now, all I want to do is replace the default browser scrollbar with a custom one.
It needs to work in PC IE7+ and Firefox and Mac Safari so it'll need to be JavaScript or jQuery. I've already tried four different plugins that I've found, but none of them worked either because of the version of jQuery (1.6.2), didn't work in all the browsers necessary, or wouldn't work for a horizontal scrollbar, etc. The ones I tried were jQuery UI's slider, jQuery Custom Scrollbar, Tiny Scrollbar and jScrollPane.
I'm hoping there's a simple plugin out there, but I can't seem to find it.

I've used Flexcroll several times and it works great. Good browser support and it handles touch events for mobile devices as well.
The appearance of the scrollbars is handled with a sprite that's pretty easy to customize. It's 17.5KB which comes out to about 8KB when it's compressed so it's nice not having the overhead of a whole library when this is all you want.
http://www.hesido.com/web.php?page=customscrollbar

Related

How can we make horizontal scrollbar?

I need to add horizontal scrollbar. It should have same interface for all browsers and compatible with android, windows, tablets etc.
Customize the scrollbar and make it cross-browser it's still complicated with full CSS.
Webkit-based browser make the customisation possible with CSS only as you do. But your snippet doesn't work even on Firefox, for example.
Maybe you should have a look to some JS plugins, in particular this one what I had to use in the past.
Demo
Don't be afraid with the theme, you can create yours. You'll find a tutorial to do it here.
Hope this helped you, even if it's not a full-CSS solution but this is the only way I know to deal with stylised scrollbar.

Native Scrollbar Overide

There are currently jQuery plugins that make a system's native scroll bar look like the iOS scroll bar (http://rocha.la/jQuery-slimScroll and others). Example code for these platforms makes it look like they need a fixed height to work.
$('#example').slimScroll({
height: '250px'
});
I want to adopt the new flexbox standard (2012-2013) edition. The height and width of the container can change. Is it possible to overwrite the native scroll bar in a similar manner to jQuery slim scroll? I know webkit has this http://css-tricks.com/custom-scrollbars-in-webkit/, but I want to have support across the modern browsers (as of the time of this post, IE11, FF26, Chrome 31, Safari 7).
Is this possible? Or will I have to overwrite the DOM hacking that jQuery slim scroll seems to do?
Probably not an easy task, my friend. The cross browser solutions are probably replacing the element with a bunch of little divs that look like a scrollbar, and then calculating how much to scroll the content by using the overall height VS the viewable height.

Parallax animations and iOS scrolling

I've created a website using SUPERSCROLLORAMA plugin. I wasn't aware of the problems with parallax scrolling on iPad and iPhone. I've found out a little bit to late, and I'm thinking about the ways to solve this.
If I understand correctly, events are disabled on this devices while scrolling. So will I be able to make website act as it should, if I disable the native scrolling and implement another one, via JavaScript plugin?
I've already disabled the original scrolling using Alnitak's answer from this question. I've tried to find some plugins to activate scrolling again, but the problem is, it has to be binded to the document since animations are fired there... Do you know the plugin that will do the trick? Is my solution even correct, or there is no solution for my case, I need to rewrite the script from scratch?
You can use parallax scrolling plugin that works on mobile browsers (iOS too).
Have a look at Skrollr. It doesn't depend on any other library, it has optional mobile js file and is very easy to use. Just read the documentation.

Facebook style fixed header

On my site, http://www.merkato.hu, the header has a fixed position. On desktop browsers, this works well - but on mobile devices, zooming the page makes the header unusable due to the fixed positioning.
I have tried a method for making the height and html absolute positioned to header and content, and overflow set to scroll - but there are scripts which need the body to be scrollable.
What is the best way to accomplish a fixed-header for mobile? None of what I'm finding seems worthwhile for iDevices.
This is a difficult problem. Support for fixed positioning is broken or missing in most mobile devices. First mobile browsers that support that came with devices produced this year, or so.
I remember that jQuery Mobile team struggled with fixed headers and footers for quite a while.
They got it working, so I recommend either using jQuery Mobile (or some other framework that can do that obviously) or digging into their JS and CSS to find out how that works.
Anyway, without about 20 different test devices you won't be able to be sure it works. So unless you have a respectable budget, you have to stick to the well-tested open-source solutions.

Html5 for mobile - swipe scrolling

I'm working on a few html5 screens which will be embedded inside native mobile apps (for ios and android).
I obviously don't want to reinvent things here, and would like to use a stable framework on the javascript side of things.
I tried using JQuery Mobile but it is way more than I need, plus they kind of force you to do things their way.
All I need is to have an element which can be (vertically) scrolled by swiping (without visible scrollbars), but I couldn't find how that can be done with JQM easily (without all of their widgets, themes and defaults).
I also tried jGestures but it did not work at all.
Any ideas what will be the best approach?
Thanks.
Update
I found this jquery plugin which does what I need: https://github.com/ifightcrime/touch-scroll
You can use -webkit-overflow-scrolling: touch; which uses the native inertia scrolling built into the phone. Works really well. There is a scrollbar, but I'm sure some clever positioning could solve that.
More info here: http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/
And here: http://fioravengi.blogspot.co.uk/2011/06/implications-of-ios-5-webkit-overflow.html
Hope that helps :)
edit: Sorry, just realised you need it to work on android. I doubt this does. For iOS though this works a treat. So, half an answer!

Categories