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
Related
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/
I've been trying to find the answer to this question without success.
I am programming some webpages for a webview in MobileSafari. I do not have access to the Objective-C to disable the functionality that way.
I'd like to provide a smooth scrolling page experience, or a normal scrolling page experience, but not allow the user to drag past the top or bottom of the page, and subsequently cause it to show whitespace and "bounce" back.
Is there a good solution for this?
Thank you.
Have a look at iScroll 4 (and the demo). It is a framework used for content scrolling in a fixed width/height area. But it should also solve your problem because you can disable the bounce effect.
How to disable the bounce effect is explained under "PASSING PARAMETERS TO THE ISCROLL".
These two parameters should be interesting:
bounce, enable/disable bouncing outside of the boundaries. Default: true.
fixedScrollbar, on iOS the scrollbar shrinks when you drag over the scroller boundaries. Setting this to true prevents the scrollbar to move outside the visible area (as per Android). Default: true on Android, false on iOS.
UPDATE
I just stumbled upon Nicescroll a jQuery plugin that replaces the browser scrolling.
It doesn't bounce back by default but you can turn it on or off.
It seems that scroller scripts like:
iScroll 4
FT Scroller
Zynga Scroller
don't work with every DOM structure. Or at least not with the more complex ones.
I am not sure why but I could not apply them to your code or some other random webpages.
But I created a little javascript helper that disables the bounce effect and emulates the scroll animation.
noBounce.js
Here you can find an example.
It is really easy to import because it has no dependencies. Just add to your HTML:
<script src="js/noBounce.js" type="text/javascript"></script>
And run somewhere in your javascript:
noBounce.init({preventDefault: false, animate: true});
You need to set preventDefault: false. Otherwise your buttons would not work anymore.
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.
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
I am working on a site to the specification of a designer who loves to put styled scroll bars on the page (not the main scroll bar on the right, but for various fixed-height divs on the page, when the content overflows).
I'm not asking if this practice is "right" or not, and I know it's generally accepted to be a bad idea in terms of user-experience, but that doesn't change what the client is now expecting to see on their site.
Does anyone know of any relatively bug free, cross browser methods for doing this. Examples I've seen so far include Skinned HTML Scrollbar, Ajaxian Webkit, and jScrollPane, but I'd like to hear from anyone who has achieved this functionality in the past before I implement one of these.
Thanks in advance.
I've used jQuery in the past when a client and their designer insisted in having customised scroll-bars. It's quite easy to stick a div on the side of a box and make it draggable between limits (and interpret the position to set the scroll offset).
But you also have to consider what happens if they want to scroll using the mousewheel, or middle-click. They're not blockers but you'll have to write listeners to update the scroll-bar position too.
Whether or not you should do it is a completely different question. You should certainly not just rely on your custom JS. Make the JS disable the scrollbar and paint all your controls using JS. If you don't do this, people with JS disabled/blocked won't be able to use your site.