I have a fullpage web site on angular 5, which do pagination by vertical swipe down and up (on desctop version is listening for wheel events). On mobile I met a serious problem with non-hiding address bar because of no scrolling happens on page (page have a size of viewport). So my structure looks like this:
<div (swipeup)="fnc()" (swipedown)="fnc()">
Container handling vertical swipes and has touch-action: pan-y property
and 100vh height
<component>Container handles horizontal swipes inside components</component>
</div>
My current Hammer config:
mc.get('pinch').set({enable: false});
mc.get('rotate').set({enable: false});
mc.get('swipe').set({direction: Hammer.DIRECTION_ALL});
mc.get('pan').set({direction: Hammer.DIRECTION_ALL});
And { "touchAction": "pan-y" } seted to container which handles vertical swipes.
With this config I'm able to scroll with hiding of address bar but vertical swipe doesn't work (or it fires super rare in strange circumstances). But I want vertical swipe to fire every time when scrolling is over and not possible (when I scroll to the bottom and my address bar became hidden it should fire next swipe in the same direction).
I will be grateful for any help or advice on how to do this in different way.
new Hammer(element, {
inputClass: Hammer.TouchInput,
});
this try
Related
I need to disable mouse scroll horizontal scrolling while hovering tab panel title text.
If you hover tab title and try mouse scroll, it start scrolling horizontal way.Its OK for tapping left and right navigation arrow to scroll.
How can avoid this horizontal scrolling which is happening my mouse scroll ?
Please find fiddle for same.
Note - Look like this scrolling happen with Google chrome browser only.
ExtJS Tab panel Fiddle
Like Evan said, set the wheelIncrement to 0. If you want to add that to a specific panel, add it with a listener:
listeners: {
boxready: function(panel) {
var layout = panel.tabBar.getLayout();
layout.overflowHandler.wheelIncrement = 0;
}
}
I want to swipe right to close my menu. I want users to be able to scroll up and down through my menu given that the menu may be long on mobile.
However if you swipe up or down and you swipe to the right a little bit, it closes the menu.
http://codepen.io/ashconnolly/pen/gpBLPp/
$('.menu_toggle').click(function (event) {
$('.menu').toggleClass('active');
});
new Hammer(document.getElementById('menu')).on("panright", function(ev) {
$('.menu').removeClass('active');
});
Is there a simple way round this?
I almost want a threshold to make it obvious.
Like a simple calculation - IF distance traveled to the right is greater than distance traveled vertically = swipe right.
Hope you can help!
You can use swipe events. Hammer JS provides you clear separation between swipe up/down/right/left. You can put a higher threshold for swipe right event if you want to avoid it on vertical scroll.
I am trying to implement a slide-in menu for a responsive page, which appears when the device size is small. I used Bootstrap Simple Sidebar and added a top toolbar that appears when the screen width is small, which has a button to slide-in or slide-out the menu. All works well.
I am now trying to also trigger the event to slide in or out the menu using swipe left and swipe right gestures. I added JQuery Mobile (custom build with only events included).
The event triggers fine, my code looks something like this.
<script>
$(document).on("swiperight",function(e){
if ($('.smallscreen-toolbar').is(':visible')) {
e.preventDefault();
if (!$("#wrapper").hasClass("toggled"))
{
$("#wrapper").addClass("toggled");
}
}
});
$(document).on("swipeleft",function(e){
if ($('.smallscreen-toolbar').is(':visible')) {
e.preventDefault();
if ($("#wrapper").hasClass("toggled"))
{
$("#wrapper").removeClass("toggled");
}
}
});
</script>
The problem I have is that during the swipe left gesture (to close the menu), the page (which would be offset to the right) performs horizontal scrolling. When I tested it using Chrome's emulator I also got this error message: Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted., which I presume is related.
I am trying to cancel the event using e.preventDefault(). Isn't this the right way?
How do I block horizontal scrolling events (without blocking vertical scrolling)?
I also tried to put overflow-x: hidden on the html, body and the <div> wrapping my content but when its margin is offset to the right (when the menu is visible) I can still drag it and move it around. If I bind an event to touchmove and do e.preventDefault() during it I block everything, including swipes.
What I want to do, is to catch the event when the user is scrolling div horizontally.
For vertical scroll I am using event 'mousewheel' and it's working properly. ( horizontal scroll is performed by a two finger drag on the touchpad - I am testing on Mac OS).
You can handle horizontal scrolling by :
$("#someContainer").on("scroll", function (e) {
horizontal = e.currentTarget.scrollLeft;
vertical = e.currentTarget.scrollTop;
});
In this case this bind all kind of scroll events on this element so you can also handle
Vertical by e.currentTarget.scrollTop
and
Horizontal by e.currentTarget.scrollLeft
I don't have the proper setup to test this, but $.scroll() should do the trick. It's probably preferable to binding the mousewheel event as well. People use all means of scrolling ;)
Required behaviour: on mouseover of an element I would like to disable main browser window scrolling or at least doing so with the mousewheel. I want to keep the visibility of the scroll bars while they are disabled.
Reason: The page is approximately twice the height of the browser window. There is a div with scroll bars. When scrolling with the mouse on the div and the bottom or top of the list is hit the main window starts to scroll. This is unwanted behaviour because often the main window scroll will either move the divs content on the screen or even scroll it off the screen completely which is very annoying. I would like to be able to mouse scroll to the bottom of the div without the main window scroll taking over and then scrolling the div out of view. The reason I would like any disabled scroll bars to stay visible is because if they are hidden the width of the page stretches to fit the gap making content jump/move which is unsightly and also problematic for mouseovers.
Is this possible using javascript/css but not jquery?
using jquery you can let the page sroll to the last position you had when the mouse entered
the other scrolling zone:
var scrolltop = 0;
var handler = function(ev){$(window).scrollTop(scrolltop)};
$(element).bind("mouseover", function(ev){
scrolltop = $(window).scrollTop();
$(window).bind("scroll",handler);
});
$(element).bind("mouseout", function(ev){
$(window).unbind("scroll",handler);
});
where element is the other scrolling zone