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..
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.
so in safari, im able to scroll over the borders of a website.
When i release my finger, it "jumps" back. Does this effect have a name? Am I theoretically able to force my website to disable this (preferably without any JS)?
This elastic behaviour entirely down to the user agent there is no way to affect this from within the window.
I've implemented jScrollPane and I'm having an issue on touch devices.
The example I'm using is http://jscrollpane.kelvinluck.com/drag_size.html where I have a vertical scroll using a circular button image for the scroll on the track. The class that's added to this is jspDrag.
On desktop, when you click and scroll the vertical button, it drags down and the content scrolls up, which is natural in my eyes.
The issue I'm facing is on touch devices (check the example URL above in Chrome using iPhone/iPad emulation in dev. tools) where you can't actually drag the button down - you actually have to scroll it up for the content to scroll?!
Users are definitely not going to know this as it's a button rather than a content block that you're using as a control.
I'd like to be able to touch and drag the button down on touch devices, rather than up, to make the content scroll.
Has any one come across this issue and managed to solve it? I've searched SO and Google Groups with no luck.
Thanks.
Unfortunately jScrollPane seems to just work like this, with an annoying caveat, which is unfortunate - I really liked the plugin.
I came across http://manos.malihu.gr/jquery-custom-content-scroller/ which functions the way it should and runs super smooth on touch devices.
I'm making my own little Javascript library that makes it easy to replace the default scrollbars for your Website (and mine) with custom ones. Part of that means giving the BODY element an "overflow:hidden" style to hide the normal scrollbars. However, this prevents all scrolling except for that which is done in code.
I have everything working in terms of showing the bar and having it scroll when you click/drag it. However, many touchpads (like on the computer I'm testing this with) have a feature where you can scroll by sliding a finger along the right side of the pad. I need the library not to break that, so I need some way of detecting when the user tries to scroll this way.
I thought it would be interpreted by the browser as a mouse wheel, so I set up an onmousewheel event, but that doesn't seem to capture it at all. For the record, I'm testing with Firefox 25.0.1.
Is there any way to capture the trackpack scrolling, preferably without an external library? I'm trying to keep this as self-contained and lightweight as possible, but if I absolutely need to, I guess I can use jQuery and its mousewheel extension...
Some browsers use the onwheel event instead of onmousewheel. So, it's usually a good idea to listen for both events.
See this MDN article for more about onwheel.
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.