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.
Related
I am trying out this new implementation where I am updating some div's bottom/top value to emulate fixed position using javascript with scroll event. The problem is while scrolling the div's are getting a fixed position but moving little bit up/down depending on scroll direction. Had to do it this way as I used transform scale. So CSS position fixed doesn't work. Any optimization advice will be very helpful.
the code is here --> Alternative of position fixed using JavaScript shows weird behavior on window resize
If you check my page on desktop/laptop you can experience that. It depends on a lot of variables like how powerful the device is, browser to browser. I am hoping that if anyone has access to MAC OS on safari and chrome or Windows chrome or any desktop/laptop with a decent browser on it may check the user experience and leave a comment about how laggy jittery is it? Is it like okay or bad?
the webpage link --> https://elomymelo.com/soundcore-motion-boom-plus.html
All you need to do is, scroll down half of my page clicking the link above on desktop/laptop. The right side content should get fixed. But may have jittery behavior on scroll. And please leave a comment about how bad is the experience?
Thanks for your time. This will help me a lot to figure out if I should implement it on the other pages or not. Any optimization advice will be very helpful.
I am implementing a navigation with anchors that trigger some Javascript to scroll to a specified element, testing it on iOS (Iphone 4) for now.
This is not a new topic and I have done a lot of research before I decided to re-open this question, for no avail. However, my setup also differs a bit from the numerous others in that I first trigger a transition on the navigation horizontally and then the smooth-scroll afterwards. I am wondering if the combination might raise that "buggy" behavior. What make me not really believe this is the fact that waiting for the transition to finish does not resolve the problem (neither using a callback function, nor utilizing window.setTimeout).
Using .scrollTop simply make the browser jump to the element. The transition of the navigation however is smooth.
Using .animate, the transition of the navigation is very laggy. When I apply a very slow animation, it "only" laggs until the transition of the navigation has finished (or some milliseconds after that), whereas the last part of the scroll is quite smooth (this gives me some hope).
The .translate3d CSS option worked fine, but the page is "cut" so that I cannot scroll back after the transition has finished. This is more of a solution for full screen pages I guess.
I do not want to know how to implement an anchor that triggers scrolling, I am asking if someone knows a smooth way to implement scrolling (in my case for iOS). Meaning, I realise that I could have written the JS-Function more generic, but this is only test-code for now.
I have not tested this on android as my target device is iOS, but if this is a known issue only for iOS (e.g. it is working on android) I would be happy if you tell me.
JavaScript / jQuery:
$('#my-link').click(function (event) {
scrollTo('element'); /* hand crafted for now */
event.preventDefault();
});
function scrollTo (element) {
navToggle(); /* This toggles classes on various elements, triggering the respective element's transition */
$('html, body').animate({
'scrollTop': $('#'+element).offset().top /* I deleted the callback (on navToggle) and setTimeout code as it did not make a huge difference to the result */
}, 666);
}
HTML:
<!-- typed out by hand, if there are minor errors they are not related to the issue -->
<a href='#element' id='my-link'>Click to scroll</a>
...
<div id='element'>...</div>
Providing that code is actually just part of the etiquette as I dont look for concrete improvement on what I have written. However, this works like a charme on desktop browsers and if it helps some of you, the better. Also check out this question on how to implement anchor scrolling as it delivers great answers for desktop browsers!
It is late (or early) and my brain is a mess, but I hope I made my question clear (If not I will come back to edit it.): Is there a way to make a mobile browser (e.g. iOS' Safari) smooth scroll like a charme? If already solved, please point me in the right direction.
Thank's a lot and happy coding!
In short when moving from one state to another in an AngularJS application I use CSS animations to animate the view change. For example applying a fade or transform via the .ng-enter and .ng-leave classes.
But in iOS 7+ you can transition from one page to another by swiping your finger off the screen edge left or right and it does a back or forward action the same as clicking the back and forward buttons on the toolbar. However because the OS does its own animation back to the previous page in the history stack, and then AngularJS fires the state change after and then does the CSS animation, you get double animations and a flicker as the content you can already see is then animated back into view... How can we prevent this? As it's a really crappy looking user experience and looks like a bug to end users.
I thought about detecting iOS 7+ then disabling the animations. But I'd only want to disable the animations when doing the slide off the edge with the finger and not for actual clicks or the browser buttons. As far as I can tell there is no way to detect this. But the UX really suffers.
Has anyone had this issue before? Worked around it?
i think you will need to figure out where the swipe started from when a navigation event was triggered. might be as simple as detecting if there's a touch on the page when the event triggers - it implies the user is touching it at that very moment.. in that case, disable the css animation. in theory that's it but i never attempted nothing even close. :)
I'm using iScroll4 to create a horizontal scroll effect on an image within a mobile website. iScroll works fantastic, but the problem is the image contained in the iScroll wrapper disables native vertical scrolling. In other words, a user's finger swipe to navigate the page is disabled anywhere within the iScroll wrapped image.
SwipeView may be able to solve this problem, but the documentation (atleast for me) is not that clear. Does anyone know how to effectively use SwipeView on an iScroll wrapped image?
sorry to pretty much reproduce the answer that's already been made - but I need to paste some code into a different space.
Alastair's example didn't quite work for me. The version of iScroll I downloaded didn't seem to support matching a class, it wanted an object. So since my project has jQuery already I used that to pass the active element in.
scroller = new iScroll($('.swipeview-active')[0], {
hScroll: false,
lockDirection: true,
hideScrollbar: true,
fadeScrollbar: true
});
I added this to the end of the carousel.onFlip() function from the example at demo/inline/test.html in the download for http://cubiq.org/swipeview
Haven't done extended testing - this is just something I'm looking at a bit while comparing cominbation of libraries to use but it's working as you'd expect in Chrome using the code above.
EDIT Just tested in mobile safari on iphone too link here https://dl.dropbox.com/u/81328343/scroll/test.html
Only thing (not sure if it's good or bad, depends on use case) is that when returning to a slide it jumps back to the top.
I've found the documentation to be terribly lacking as well but something like this works for me:
function swipeView(wrapper){
wrapper = new SwipeView('#wrapper', {
numberOfPages: pages.length
});
wrapper.onFlip(function(){
scroller = new iScroll('.swipeview-active', {
hScroll: false,
lockDirection: true
});
});
}
This initialises iScroll on your current SwipeView page upon swiping to it. Horizontal iScroll-scrolling is disabled which leaves that event available to SwipeView and the direction is locked so while a vertical (iScroll) swipe is in progress, a change in the user's swipe-direction won't swipe to the next SwipeView page. Without those options, one can do a bizarre horizontal swipe.
I'm using OSX Lion and Chrome which allows you to swipe back and forth to go back/ forward in the browser. However I'm finding it often interferes with scrolling within a page. I have horizontal scroll bars within the website i'm creating and swiping back and forth within them often causes the browser to move forward/ backward in my browse history - definitely not the behaviour i want.
I'm creating my horizontal scroll boxes very simply with html/css and the overflow property. I'm wondering if the correct approach is to use javascript to detect a scroll event, and prevent the default behaviour. It just seems like a more complicated approach to something that should be simple.
http://cubiq.org/iscroll
http://www.azoffdesign.com/plugins/js/overscroll
http://uxebu.com/blog/2010/09/15/touchscroll-0-2-first-alpha-available/
http://plugins.jquery.com/project/jScrollTouch
Tried or seen any of these, you can just disable the browser scrollbars and use these instead..