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.
Related
Good morning, I created a simple trello-style interface.
Obviously I want to scroll the cards in a column: that works on a desktop pc with mouse wheel, but not on a smartphone using the touch scroll gesture.
I tried to use the "hold" param when creating draggables, nevertheless the scroll gesture didn't work.
How can I do?
Thanks.
The scrolling issue was caused by the CSS instruction "touch-action: none;" (it was present in the interact website's examples). Just removed it and now scroll works fine.
I've tried a few libraries and Jquery plugins for sliding "pages" through the viewport using touch gestures, but none of them have "physics" similar to the iOS homescreen.
My goal is to assign a three-finger gesture that works on both touchscreens and touchpads that will simply move through a set of "pages" horizontally in realtime, and when the touch is released, "snap" to the currently most-visible page in the viewport. Just like the iOS homescreen.
SwipeView will give you that. It's an infinite scroller that only loads three pages at a time. It's very quick (the company I work for uses it for one of their products.)
You'll need to customise it to work on three fingers rather than just one. If you need any help using it, I'll be glad to help =)
I have a problem with fixed floating menu on android phones browsers (not tested on other phones) and still can't find any solution.
Let's take this as an example: (the first link I found on google)
http://www.backslash.gr/demos/jquery-sticky-navigation/
Scrolling and clicking on menu works, but if I make fast scroll and let the scroll stop automatically 'til it reaches phone browser's bottom or top, the floating menu becomes inactive (not able to click on floating menu, focus-link position is changed). If I make fast scroll and stop scrolling by touching the screen (don't let the scroll to reach bottom or top and stop automatically) the floating menu works and links are active.
I have tried about 10-20 examples I found on google, even bootstrap has the same issue.
Also tried libraries like mCustomScroll and iscrool, but they are too slow for phone browser or have other issues.
Tested on android > 4.x several different phones and versions.
I hope you understood the problem and can suggest anything.
Also it would be nice if anybody could test it on iphone (but I think its Android problem).
Thank you.
Found good enough solution https://github.com/filamentgroup/Overthrow/
So I was able to create fast scrolling page and make workaround for described bug.
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..
I am playing around with Sencha Touch, especially with examples like http://dev.sencha.com/deploy/touch/examples/
However I am faced with a problem, when using the component the scale is set on the iPhone and the user cannot scroll the page or zoom in or out.
How may I disable these settings as I would like to have the carousel on a page which can be scrolled, and zoomed in/out.
Thanks.
[Sencha person] You can't zoom in or out of a Sencha component. Having fixed UI Chrome is one of the reasons to even use a UI framework (otherwise you'd might use a simple mobile-optimized web page).
You can have a scrollable area within a carousel, but you might want to consider whether that's really the best UX, since the carousel is already a scroller (it just scrolls in fixed increments) Take a look at touchstyle.mobi/app for an example of a data-store backed carousel.
I could be wrong, but it seems to me that the goal of sencha is to make full screen apps, so it seems logical that you cannot zoom/scroll the page ?
There are methods and plugins for zooming if you want.
Carousel ImageViewer (plugin) - Zoom feature
Pinch-to-zoom in panels
Pinch emulator (plugin)