I am building a user interface for a web app.
The structure is something like this.
$("#scroll-down").on("click", function() {
thumbnails.stop(true, true).animate({
scrollTop: '+=300'
}, 100);
I'm using two scroll buttons to scroll up and down a div, because the items in the div are draggable, and if you try to scroll by swiping it just picks up a thumbnail instead of scrolling.
The approach I'm using works perfectly on the desktop and on android.
On iOS (specifically iPad with chrome or safari) i have this weird problem that when the user is inpatient and taps fast multiple times on the scroll buttons, the scroll doesn't work responsively (ie: 10 taps on the down button don't take you to the bottom). Almost like the stop() doesn't work.
Any ideeas / suggestions?
Thank you!
Ok i figured out the answer and its kind of silly, I had the event listener for click (tap in case of iPad). When rapid clicking on desktop it would work - chrome took them as multiple clicks. But when rapid tapping on iPad - iOS (or Safari) took them as double taps, so they wouldn't trigger my events properly. Made the listener to be for 'click dblclick' and that solved the issue.
Here it is for other people who might find themselves in the same situation:
$("#scroll-down").on("click dblclick", function() {
thumbnails.stop(true, true).animate({
scrollTop: '+=300'
}, 100);
Related
I'm working on an a webapp, where I need to adapt the contents of the screen when the virtual keyboard is expanded. Luckily, someone has already created an example of this here:
https://pmusaraj.github.io/ios15-bottom-bar2.html
When tapping on the text area, it correctly resizes. However, there is a small delay between the tap and when the resize happens in iOS 15.5. This is because the resize event doesn't seem to fire fully until after the keyboard is expanded. In iOS Chrome, interestingly, this does not happen and it works correctly.
Are there any workarounds to get Safari to fire the event sooner? Or alternative approaches to achieving a similar effect?
As of today there are no real solutions for this.
The only "workaround" that I found is to detect when the keyboard opens and closes with regular events like focus and blur. But you can't guess the final visualViewport sizes because there are different keyboards so this wasn't an option for me.
My "solution" to this issue was extend the modal and its background fade beyond the viewport with after elements (see here). That way there is still a jump between opening and closing the keyboard, but at least the look is a bit more consistent.
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 am trying to get a div to go from 100% opacity to 0% opacity on scroll.
I made this Fiddle and it works great in a web browser, just as I'd hope. It works in mobile browsers too, but with one horrible downside.
var divs = $('.cover_image');
$(window).on('scroll', function() {
var st = $(this).scrollTop();
divs.css({
'opacity': (1 - st / 40)
});
});
(What is happening in the fiddle is the top div is going to opacity:0 as you scroll, revealing another div below it with the same background-image, but blurred. Creating the impression the same image is blurring the more you scroll)
In a web browser as you scroll the div drops in opacity progressively with a fade like affect which is great.
However in a mobile browser the change of opacity doesn't take effect until you release your finger from the the screen. So there is no progressive change of opacity. It only makes the changes visually as you release your finger from the screen, not as you scroll.
Is there a solution for this? I have tried adding in scrolling touch to my css, but it doesn't make a difference.
-webkit-overflow-scrolling: touch
Scrolling distance on mobile works very different from desktop. Even if you detect each step in the touch event, this is only half the truth. When the user releases, the site will continue to scroll for a bit while deaccelerating. This is called momentum scroll and will in most cases not be picked up by the touch event.
There are to my knowledge no perfect solution to this, since different devices handle scroll and touch very differently. There are however a few options you could look into.
Scrolling libraries
There are libraries to help you solve this problem. For instance one called scrollability that emulates scrolling to work more consistently.
Scrollability adds a good imitation of iOS native scrolling to your
mobile web apps.
Scrollability is a single script, it's small, and it has no external
dependencies. Drop it into your page, add a few CSS classes to
scrollable elements, and scroll away.
Ignore the scroll completely
Don't look at the touch or scroll events. Instead use setInterval or requestAnimationFrame with desired frequency that reports the pages current position (document.documentElement.scrollTop) at all time. Base your animation on this value instead of scroll or touch events. You might want to limit this to touch devices since it's not needed for desktop.
Write your own scroll functionality
Disable scrolling and make your own, without for instance momentum scroll, that is suited for your needs. Note that the scroll event is usually disabled on desktop if you disable scroll, but mousewheel works. I have been down this path and I would not recommend it. Instead you should probably go with the library approach at the top.
I am creating a web app that uses the jquery.mousewheel.js plugin to detect the user's mousewheel and then scroll between the two sections.
The body element is also set to overflow:hidden so I can't detect a scroll event.
It works perfectly on the desktop but I've tried it on iPhone and it doesn't trigger the mouse wheel event at all. So is there some sort of add-on to the plugin I am using or an alternative event I can listen for, that will tell me when the user tries to scroll down/up vertically?
Using something like Hammer.js you can detect swipes via swipeup & swipedown events, and it even includes a jquery plugin so you can just write the following:
$("html, body").hammer().on("swipedown", function(e) {
// do scroll up stuff
});
$("html, body").hammer().on("swipeup", function(e) {
// do scroll down stuff
});
You can capture the gestures with HammerJS, but then you have to code the scrolling yourself. Another option is to use iScroll with probing enabled, letting you capture the scroll position without interfering. More here:
javascript scroll event for iPhone/iPad?
I am developing a website that will have a carousel on a page using iScroll 4. I noticed a strange problem on Android 2.2 and 2.3 devices. I did not notice it on Android 2.1 or Android 3 or any non-Android device. This problem happens whether I use iScroll 3 or iScroll 4.
When I press the back or forward buttons, the carousel does not properly update. The images don't scroll, or they only scroll partway. If I press the forward button enough times, it may disappear as if I have reached the end of the list (as a result of my style on the "disabled" class), and likewise with the back button.
If I scroll the page up or down, then the carousel will update and work fine for a while. Does anyone know why this is happening or what to do about it?
You can see an example at http://jsfiddle.net/R4NWE/. If you want to access the example directly using a mobile browser, you can do so at http://fiddle.jshell.net/R4NWE/show/.
I figured out a solution. I put this in the "scroll" option that I am passing to CarouFredSel:
onAfter: function() {
var transform = $("#scroller").css("-webkit-transform");
$carousel.closest("#scroller").css("-webkit-transform", transform);
}