With the most latest updates Google has been rolling out, the sites have all been getting custom JS scroll bars (at least in Chrome).
What I like most about it is that its simple and works perfectly. Until now a lot of the JS scrollers that I have seen don't function that well - i.e. if you scroll really fast or scroll and move your mouse around they don't function that well.
Hence I'm just wondering if anyone know of any scroller out there that is simple/small (code foot print is small) and functions well (as mentioned about).
I have thought about using jQueryUI's scroll as a base, but for my needs I can't take on jQueryUI for this one feature.
They're done by styling ::-webkit-scrollbar psudo-elements with CSS, not JS.
I have been using the lion bars jquery scroller, and I think it meets all the specifications you mentioned, give it a try.
Take a look at https://gist.github.com/fanzeyi/3995618
Works fine for me.
Related
I just found out about this really cool plugin (new for me, old for some of you maybe) and it works like a charm upon implementation, but only in regular computer browsers. When I try it on my android phone, the css3 animation of the dropdown moves really really choppy, just like its dropping frames. How can I fix this problem?
Here is the plugin I am reffering to:
http://responsive-nav.com/
They seem to have done a really nice job with the plugin, I would say the largest cause of the drop of frame rate may be because you are repainting the entire screen. If you would like, roll your own side navigation but make it go over the existing web page rather than move all the elements on the screen.
EXAMPLES OF SIMPLER MOBILE NAV without repainting
http://fringewebdevelopment.com/
http://www.sony.com/index.shtml
As a further step you can also get rid of the javascript and just do plain CSS and see how that works for you, an example of using checkboxes and labels to control the side nav can be found on my site (just inspect the code) - www.aktof.ca . Hope this helps!
I have been going through this website, I was wondering how to implement a scroll like this. I mean background picture is changing and you can see front image sliding nicely.
Same type of effect I saw at Apple Inc Website. Here if you scroll down, in middle of the page you see an image of iPhone getting separated from a lot and joining another one while scrolling. I just started learning jquery. Can anyone suggest me how to implement this type of animation as I am not sure how to search for such effect. Please, any help is appreciated.
There's another plugin for it, probably a bit more options and designed to work also in old browsers such as IE 9 or IE 8 (OnePageScroll doesn't) and which I believe is essential nowadays.
It is called fullPage.js
I believe it will fit you better.
The Apple website uses functionality similar to OnePageScroll.
How can I make my scroll bar black for a <div>?
Is there anything that will work in Webkit, IE7 to IE9 and Firefox?
You cannot do this in Firefox. Only IE and webkit browsers support modifying the scrollbar.
See http://msdn.microsoft.com/en-us/library/ie/ms531153%28v=vs.85%29.aspx on how to do it in MSIE and http://www.webkit.org/blog/363/styling-scrollbars/ on how to do it in webkit.
You cannot style the scrollbar of the browser. It's not universally supported (although IE did try to implement it).
Also, it's a bad idea to do so from an accessibility perspective. Think of (old) people who cannot see your very slim, almost invisible custom scroll bar or don't know that what you have there is actually a scroll bar.
You can use custom scrollbar plugins in JS like this one. It's all over the place
As Pez Cuckow said:
I imagine that custom scrollbar is implemented in javascript, it looks
very slick and you can't make a browsers scrollbar look that good!
Find an example I just put together for you at:
http://jsfiddle.net/9LHPW/2/ - note check the resources tab as this
includes four external files (3x Js and 1x CSS)
Have a look at this website for a further example (looks like exactly
what you want) with Javascript and jQuery:
http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
You can find the plugin's home at
http://manos.malihu.gr/jquery-custom-content-scroller
Along with a how to use it section!
I agree you shouldn't tamper with the visibility (I'm looking at you Apple) of the scrollbar of a scrollable region. Sometimes, a box with scrollable text fits just inside the boundaries and there is no visual clue letting a user know that it scrolls thereby confusing the user. Is it really a good idea to prevent the user from being able to use your application? Most likely not, but you can also argue back that your target demographic wont have any problems; an application for extreme inline competition is probably not going to be used by people who aren't able to see very well. However there are accessibility/usability concerns that go beyond visual hinderances; cognitively impaired, or non tech-savvy, individuals might be very good at said aggressive inline and want to compete in your upcoming event but wont be able to because the black-on-black scrollbar looks awesome.
That all said, do what make you happy. That's what I do.
On iOS safari, one-finger panning doesn’t generate any events until the user stops panning. An onscroll event is only generated when the page stops moving and redrawn.
I need a way to detect real time scrolling. Specifically, I want to make a sticky menu that will also work on iOS safari. On non-mobile browsers, sticky menu can be done by switching between "position relative" to "position fixed" on the element while listening to the onscroll events. This method won't work on mobile browser because onscroll events are not continuously fired. What can I do?
Answering my own question. iOS7 now support position:sticky
Demo: http://html5-demos.appspot.com/static/css/sticky.html
I've recently spent many hours trying to come up with a practical solution for the same problem. There's no right way to do this, although there are a few decent hacks (most of them mentioned already). The problem is that JavaScript is paused while the user is scrolling. It makes sense when you consider the implications, but it makes it damn hard to implement fixed positioned element.
The best thing that I've been able to find is this wonderful post by the folks at Google. You can check out http://gmail.com in mobile safari to see it in action.
https://developers.google.com/mobile/articles/webapp_fixed_ui
Hope this helps.
I had a similar issue and bound handlers to touchstart/touchmove/touchend using jquery to detect the single finger scrolling and it worked perfectly. In my case I needed to move another element the same amount as the attempted move of another element and it updated nicely as the scroll was attempted so it ought to be suitable for your requirement.
If all you want is a sticky menu, you can save yourself some headaches by using an existing library. I've had success with iScroll:
http://cubiq.org/iscroll
At the very least, you can take a look at how this works and base your solution around that.
Happy hacking!
Old topic for sure, but I can see alot of visits here. If all you want, is a sticky menu, you can use fixed positioning. No need for iScroll there.
I am hoping to incorporate custom scrollbars in my site as there are divs with set heights that will overflow. I have managed to get exactly what I want using webkit styling in css however I am aware that there will be issues when looking at the site in Firefox or IE.
As a result, I tried to incorporate the jScrollPane library into my site but its causing all sorts of js "clashes" which is throwing the whole site into a mess!
Are there any simpler methods to customise my scroll bar so that I have cross browser compatibility without adding a new js page to the site?
Alternatively - is there a way I can attach something to the css for when the browser is firefox!?
Thanks
JD
Fast forward to 2017, and there are a lot of good custom scrollbar scripts these days. By good I mean ones that rely on native scrolling mechanics and works on mobile devices too. The one I use is Perfect Scrollbar. Some other good ones can be found here in this blog post.
I'm a little confused with what exactly you're asking for, but if you're looking for a scroll bar of some sort that can be customized with CSS, look no further than jQuery UI's Slider.
You'll have to add some event handlers to do the scrolling, but it shouldn't be too difficult over-all.
Here are some custom scrollbars you can use:
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
One off these solutions should work. BTW i use JScrollpane and it works like a charm for me
I went through all of the suggestions above and was disappointed by either of the following issues:
poor cross-browser compatibility
lag
a lot of redundant code/ dependencies (jQuery UI)
Therefore, I've used some CSS trickery and JavaScript (depends on jQuery selectors) to build my own custom scrollbar implementation. The demo is available at https://dev.anuary.com/680a3c94-9651-550f-abca-e853613eb9ce/. The source code is hosted at https://github.com/anuary/jquery-custom-scrollbar.
My approach relies on the native browser scrollbar. However, this implementation does not support horizontal scrollbars.
Just found this, without jQuery, if anyone is interested:
http://www.script-tutorials.com/custom-scrollbars-cross-browser-solution/