Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

mobile support #3

Open
erikdonohoo opened this issue Sep 18, 2015 · 3 comments
Open

mobile support #3

erikdonohoo opened this issue Sep 18, 2015 · 3 comments

Comments

@erikdonohoo
Copy link

do you know what modifications need to be made to get this to work on mobile devices?
@Rob--W
Copy link
Owner

Rob--W commented Sep 18, 2015

If you really want to go through the JavaScript route, then you should use listen to touch events: https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

But on mobile, pressing the display and moving your finger around already pans areas with scrollbars, so you probably don't need any library for that.

@erikdonohoo
Copy link
Author

My scenario is that I'm showing a pannable area in a popup modal. When I try to pan inside the modal with my mouse and dragging, it works fine, but with an ipad it doesnt. It tries to scroll the page rather than the content in the modal

@mhulse
Copy link
Contributor

mhulse commented Oct 11, 2016 •
edited
Loading

The app I am working on looks better on desktop sans-scrollbars. So, on desktop, I set overflow:hidden on the grabbable area, and use the following script to set overflow:auto only on a touch device:

<html class="no-touch">
...
<script>/*! no-touch uglified | https://gist.github.com/mhulse/4704893 */!function(o,n,c){("ontouchstart"in o||o.DocumentTouch&&n instanceof DocumentTouch||c.MaxTouchPoints>0||c.msMaxTouchPoints>0)&&(n.documentElement.className=n.documentElement.className.replace(/\bno-touch\b/,"touch"))}(window,document,navigator);</script>
#canvas {
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}
.touch #canvas { overflow: auto; }

Though, let me asterisk the above statements with this comment: I just assumed overflow:hidden would not work on mobile, so I should probably test that as the above code may not be needed?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@mhulse @Rob--W @erikdonohoo