jQuery Scrollbar Plugin - javascript

Hi I am stucked in my big project using the custom scrollbar. None of the plugins are 100% working or I may be unaware of some plugins.
which jQuery scroll bar plugin is best? in given list of circumstances below.
proper touch / scroll (cross browser and device compatibility)
nested conditions
inside popup and inside drop down.
inside ajax updated contents
resize / orientation scenarios
for devices: auto focusing for input inside popup
supported in major devices including samsung low end touch phones.
Has any one using this type of custom scrollbar which is perfect for all type of my scenarios?

I'm using the plugin by Malihu. It does the job pretty well and have dozen of options so you can personalize it. I think it passes all your requirements.
http://manos.malihu.gr/jquery-custom-content-scroller/

Related

Scrollify section scroll with overflow

I am trying to use the script Scrollify (https://github.com/lukehaas/Scrollify) but I have sections that are longer than the user's screen, which means you first have to scroll down to see that contents' content.
Scrollify, however, doesn't let this happen and will just immediately scroll to the new section.
Is there a way to modify Scrollify and/or use another script that will accomplice what I would like it to do?
Scrollify has recently received a number of updates that resolve the issues you've been having.
Scrollify now has additional options, methods and callbacks and it now works great with trackpads, Apple Magic mice and kinetic scrolling.
You can easily achieve that by using fullPage.js instead. If you want to keep the scroll bar as in scrollify, just use the option scrollBar:true for that as in this example.
Using the option scrollOverflow:true you can overcome your problem as you can see in this example.
From fullPage.js documentation:
scrollOverflow: (default false) defines whether or not to create a scroll for the section in case its content is bigger than the height of it. When set to true, your content will be wrapped by the plugin. Consider using delegation or load your other scripts in the afterRender callback. In case of setting it to true, it requires the vendor plugin jquery.slimscroll.min and it should be loaded before the fullPage.js plugin.
Additionally, fullPage.js:
Provides much more options, methods and callbacks.
when possible, it uses css3 transformation which perform better in tablets and mobile phones.
Solves problems with Apple laptops trackpads, Apple magic mouses and any kinetic scrolling.
Provides a set of extensions

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.

Touchscroll using Prototype

I'm developing a mobile site. I want to incorporate a touch scroll area of the page with fixed header and footer areas.
I tried iScroll 4, but it gave problems when using early versions of Android.
The following solution works very well with iOS:
http://neave.github.com/touch-scroll/footer.html
Would you be able to suggest a solution that will deliver this functionality for Android phones?
From JQuery Mobile's doc site:
Scroll events
scrollstart
Triggers when a scroll begins. Note that iOS devices freeze DOM
manipulation during scroll, queuing
them to apply when the scroll
finishes. We're currently
investigating ways to allow DOM
manipulations to apply before a scroll
starts.
scrollstop
Triggers when a scroll finishes.
Look here for more information
I haven't been able to find a good example. You can look at $.mobile.silentScroll or $.mobile.slider here

Making dojo dijit layout iOS compatible

I have a complex web application which is based on dijit.layout. You will find a good example of the structure here (check the examples).
As you can see there is no full page scrolling only scrolling inside the layout boxes. All layout areas have overflow:auto, which means they enable scrolling when the layout areas content is larger than the available area space.
The problem is, iOS devices like iPad/iPhone/iPod touch don't support scrolling inside HTML only for a full page.
Is there any generic way to make a digit.layout application compatible for iOS and other touch devices? For example extend the layout areas depending on the length of the content.
did you already find a solution to this problem? I played around with a combination of dojox.mobile.ScrollableView and dijit.layout but end up having two scrollbars.

Simple scroll element with jQuery Mobile or use something else?

I really want to use jQuery mobile, but my first needs are just to control what areas are scrollable and create fixed menus, etc.
This takes lots of effort with that toolset, when it's VERY easy with something like iScroll http://cubiq.org/iscroll-4
Is there an easy way to accomplish a scrollable area or fixed position elements with jQuery mobile?
jQuery mobile is way too much setup just to create scrollable areas.
iScroll would be what you need. And unlike jQuery mobile, iScroll works on various devices and on the desktop. jQuery mobile, not so much.
And to the person who said that is has a problem with form elements, he is right, but there is an easy fix...
iScroll 4 not working with form <select> element iPhone Safari and Android browser.

Categories