I'm trying to gradually show a div as the swipe down event happens on the body.
I'm currently using the jQuery version of hammer.js to listen for the swipe down, but how do I get the distance of the swipe and change the height of the div as the swipe is happening to that value?
It is not much, but here is what I have so far:
var distance;
$('body').on('swipedown', function(){
// set distance to swipe distance
$('header, #header, [role="banner"]').css('height', distance);
});
But, won't the above only set the distance at the end of the swipe down? How can I set the distance while the swipe down is happening?
I would greatly appreciate any and all help!
By hammer.js swipedown event triggered, your function will get a gesture object in the event object.
you can get that like this
Hammer(document.body).on('swipedown', function(e){
gesture = e.gesture
// gesture.distance or gesture.deltaY is swipe distance
// and you can console.log(gesture) to find more!
});
Related
I've got a custom scrollbar solution (view on CodePen).
The obvious idea is dragging the custom scrollbar should scroll the page.
Try it and see what happens... it's bizarrely janky, and the scrollbar and page scrolling will suddenly snap between points.
The scrolling process is currently in a mousemove handler:
update the scrollbar position visually
window.scrollTo(...) the new position, calculated as viewport top relative to the new scrollbar position
If I comment out the window.scrollTo(...) line, the scrollbar itself then moves perfectly smoothly and sticks with the cursor.
Pertinent code
mousemove(e) {
if (!this.active) return;
this.update(this.getScrollDeltaPositional(e.pageY));
window.scrollTo({top: this.getWindowScrollTop()});
}
update(position, show=true, timer=true, time=0) {
let track = this.getTrackHeight();
this.trackPosition = Math.min(Math.max(position, 0), track);
this.track.style.transform = `translateY(${this.trackPosition}px)`;
}
getWindowScrollTop() {
let scroll = this.getDocumentScroll();
let position = (this.trackPosition / this.root.clientHeight);
return Math.round(scroll * position);
}
(Recommended you view the full source on CodePen)
I presume the scrolling each mousemove is blocking the mousemove events, resulting in the sudden snaps being observed.
How to achieve a smooth scrolling effect on window using a custom scrollbar?
I finally found the answer
After far too many hours of trying everything conceivable to remedy this, I stumbled upon this identical problem: https://css-tricks.com/forums/topic/scrolltop-inexplicably-going-haywire/.
As that user eventually discovered, MouseEvent.pageY (which is what I was using to get scroll position) is
relative to the top edge of the viewport, including scroll offsets.
Therefore, the scroll movement effectively amplifies the mousemove events, causing the scrolling to accelerate exponentially as seen in the demo.
So after half a day of hacking about with this, the fix is a simple Ctrl+H... use MouseEvent.clientY instead.
I am trying to add scroll event listener to my three.js project.
I tried this code but it doesn't work and I don't know why.
window.addEventListener("scroll", function(e) {
console.log("scrolled")
// code to increment object.position.z
}, true);
I tried OrbitControls.js and TrackballControls.js, but it zooms. I don't want the zoom feature.
Any ideas?
The scroll event will only fire if you do actual scrolling by having more content than can fit on the screen. If you have the canvas at 100% width and height the wheel won't send any scroll events. Try the wheel event instead.
window.addEventListener("wheel", function(e) {
console.log("scrolled")
// code to increment object.position.z
}, true);
What if you add your event on your canvas instead of the window element? If you can provide some code that would help also!
When a user is on a touch screen device, I'd like to restrict diagonal scrolling - so the idea is to force scrolling one direction at a time - horizontal or vertical.
I've set up a JS Fiddle that detects if touch scrolling is enabled and I'm able to output the x and y coordinates. But I don't see an offset or anything and figure I need that to calculate the intended direction.
I know that apple uses a directionalLockEnabled that will restrict, so I'm wondering if something like this is available in Kendo. If not, maybe there's a way I can figure out which direction the user is intending to scroll in and 'freeze' the other coordinate.
A JS fiddle I created (relevant part in the dataBound method):
http://jsfiddle.net/dmathisen/tskebcqp/
(the relevant code only works on touch... but should work if you enable mobile emulation in dev tools)
Another issue is the amount of times the scroll event is triggered. When working, maybe I can set up a debounce to handle how often it's triggered.
If you want to use javascript for this fix, you can calcul the ranges of the X and Y moves.
For that with touch devices, set the start posi X and Y when touchstart and calcul the distances when touchmove
var touchY = touchX = 0;
$(document).delegate('.yourWrap', 'touchstart', function(e){
touchX = e.originalEvent.touches[0].pageX;
touchY = e.originalEvent.touches[0].pageY;
});
$(document).delegate('.yourWrap', 'touchmove', function(e){
if (Math.abs(touchX - e.originalEvent.touches[0].pageX)
> Math.abs(touchY - e.originalEvent.touches[0].pageY)) {
// Block overflow-y
} else {
// Block overflow-x
}
touchX = e.originalEvent.touches[0].pageX;
touchY = e.originalEvent.touches[0].pageY;
});
For wheel devices, compare delta
(e.wheelDeltaY/3 || -e.deltaY)
(e.wheelDeltaX/3 || -e.deltaX)
I am using Zepto (with the Touch Module)
I have a div with a 'swipe' listener on it.
I want the div to follow the finger of the user when swiping it, just as you swipe away your notifications on your Android or iPhone.
Is there a way of getting the swipe/finger position on the swipe event? so I can put the div to position: relative with a left: [finger left position]
I found a solution for it, you have to bind it to the touchmove event, not the swipe one:
$(".element").on('touchmove', function( e ){
var x = e.touches[0].pageX;
$(this).css('left', x);
});
And of course add an ontouchend event in order to replace the element where it was in the beginning (in case the user released the swiped element)
It's also even better to use -webkit-translate: (70px 0px) for faster performance (replace 70px with x)
I have a #wrapper div wrap a #pane div, the #wrapper, overflow-x:scroll.
What I want to do is while I touch the #wrapper,the #pane should follow my finger moving.
my code is
$('#wrapper').on('touchmove',function(event){
var touch = event.originalEvent.targetTouches[0];
var move_x = touch.pageX;
$('#wrapper').scrollLeft(move_x);
})
The result is : Yes the #pane is following my finger just in reverse direction, but when my finger leave and touch again, the #pane scroll location jump to my finger x position instantly, that's not what I want. The #pane shouldn't move when I touch it until I drag around it.
If you dont want it to jump to your finger location, you will have to store the current position, and move it based on the difference between the original location that you touch, and the end location that you stop touching.