I'm developing a site which will have a 2-3 columns depending on the page.
Mobile support is important and we're already handling orientation changes on iOS/Android/others.
The viewport is initially sized to fit the width of one column. Most mobile browsers have "sticky" horizontal scrolling to make it easier to scroll up/down a column (minor left-right drags are ignored after significant up/down scrolling).
What I'd like is that once the users starts scrolling left/right that the scroll would "stick" again at the next column.
I don't know if this is even possible?
The alternative would be for us to size the page to the viewport with overflow:auto; and handle the scrolling ourselves. I imagine this would be more reliable cross-browser but it feels a little hacky and like it might be a lot of effort to polish properly.
Has anyone seen anything like this / have any suggestions?
We eventually implemented something very similar to that discussed in this question except with both horizontal and vertical scrolling.
Related
I made a LP with scroll animations I'm really proud of. BUT it only looks good when used with a trackpad on a lap/desktop. With a mousewheel it's no longer smooth, and on a mobile devices the alignment breaks when the address bar (etc) changes the viewport height.
This is probably a common issue with animations. How do you guys handle it? Is there a best practice?
I'm a bit frustrated, it seems that i can't find any custom scrollbar lib that will be as smooth as native scrollbar (on mouse wheel scroll) without faking scroll animation by heavy js, i.e that will simply hide native scrollbar and show custom on it's place.
Looks like all of the "simple" scrollbars just listens for wheel event and then jumps by some step, see http://noraesae.github.io/perfect-scrollbar/
I suppose this was fine some years ago when native scrollbars was "jumpy" also, but now Chrome's scroll is smooth.
This one http://noeldelgado.github.io/gemini-scrollbar/ may look like something i'm looking for, but sadly seems to have some issues oversizing or cutting out content.
Any ideas of good solutions, kind sirs?
I have an element with position fixed (pinned to any corner) on a page (which I do not necessarily have control over the meta viewport tag - it is an embedded widget for third party sites). On Mobile Safari when the user pinch zooms the page at a certain point the viewport becomes larger than the visible area. At that point the fixed position element stays attached to the viewport and is not necessarily in the visible area.
I would like to compare two widths: the width of the visible area and the width of the viewport. I believe the size of the visible area is window.innerWidth. I am not sure how to measure the viewport.
I have been trying to see the relationships between:
document.documentElement.clientWidth
screen.width
window.innerWidth
window.outerWidth
...But have not been able to see anything obvious.
This is butt ugly but it does show some code that almost works (view on iOS to see it working. Use a desktop and click edit at top right of page to see or edit code):
https://jsbin.com/jopamu (iOS only)
The trick with the "overzoom" calculation is nasty but it does compensate somewhat for the multiple viewport zooms. It is a complex problem to solve because there are competing issues:
pinch-zoom
zoom due to input focus
the "position:fixed" zoom
potentially the OS (accessibility) zoom
The possible solutions I have found are:
Position the menu using the calculations above and position:absolute - updating the left/top in onscroll event. Has ugly juddering (can improve a little by hiding and only showing when zooming/scrolling finishes).
Position the menu using position:fixed but change the left/top to correct the menu position as zooming/scrolling occurs. Much less judder but I couldn't quite get it 100% reliable (some race condition).
Not suitable for your case (and highly unrecommended due to risk of breaking things): you can prevent pinch zooming and iOS10 double-click zooming by cancelling default on touchstart. Difficult because it needs many other workarounds so normal touch works, and needs synthetic scrolling and zooming (but has ugly side effects such as preventing scrolling working sometimes and also interferes with accessability e.g. if voice accessability turned on etc etc).
If you just want to see the widths then use the older version:https://output.jsbin.com/jopamu/6
I would like to have in my JQuery Mobile application both header and footer on a fixed position and, when the user pinches or zooms the front end, only the content area will become bigger or smaller while the header and footer will remainthe same size. Is it possible?
I guess it would be cool in some cases, but mobile browsers don't like fixing things on the screen and don't really support it. JQM makes some tricks, but not with zooming.
If you want you could disable scaling in meta viewport (set max and min), but that might not be the best thing to do in some apps.
If you've used a Mac desktop machine, one of the first things you'll notice is that scrolling is different on a Mac than on a Windows desktop.
Windows desktops scrolls in big chunks - multiple lines at a time.
Mac desktops have smooth scrolling - a few pixels at a time.
The difference is pretty obvious when you look at scroll-oriented websites such as http://benthebodyguard.com or http://nikebetterworld.com
Is there a means by which we can control that scroll distance in the browser using javascript?
How the scroll wheel works is dependent on the users configuration of the scroll wheel, and isn't up to you. Users can choose how far the scroll goes.
Even if you were to hack something in place to get this working, I certainly wouldn't recommend it. Not everyone has fast machines that make such smooth scrolling a reasonable task.
You could implement your own scrolling method. Override the default behavior in JS and you'll get the same scrolling in all browsers. $(document).scroll(); should do the trick and do your own calculations and scrolling inside of it.