In iOS7, when you scroll down (swipe up) the menu bar on the bottom hides, when you scroll back up, it appears again.
Is there any event send out when this happens?
I have an overlay that fills the entire screen vertically, but when a user scrolls on the page, this overlay doesn't fill anymore due to the menu bar hiding.
I don't want to listen to a scroll event constantly, although for now that seems like the only option.
Related
I have a fixed menu at the bottom of the screen on mobile devices. When you swipe up in the trigger area, it opens the menu and vice versa (closes it when you swipe down on the menu)
My issue is that when I swipe up, it scrolls the page down and when I swipe down it scrolls the entire page up.
How can I disable page scrolling when the swipe is initiated in a certain area?
Add class in body tag when you swipe up from your bottom menu. In that new class put overflow hidden CSS. I suggest it looks good if you add click effect instead of swipe up. Or here this is one similar question.
$('#menu li a').on('click', function(){
$('body').removeClass('overflow-hidden');
$(this).parents('body').addClass('overflow-hidden');
});
.overflow-hidden{
overflow: hidden;
}
I have a menu off the screen which reveals after clicking on the reveal menu button.But because of that menu there's a horizontal scroll appearing.It’s spoiling the user experience. My website:sadmansyfe.ga.
I have tried everything but nothing is working out.
Scroll doesn’t appear if I shrink the web browser in desktop.It only occurs in mobile.
I am working on a sencha touch mobile app. There is one form panel having many fields so I kept it as scrollable. when I open that screen (panel) and scroll down. and go back to other screens and again come back to that screen panel, it remains scrolled down at bottom position. I want to always set it at the top when I will open it. I have tried some code on activate event of that form, but it doesn't seem to be working.
I have tried to belove code in the activate event.
this.formPan.element.dom.scrollTo('top', 0);
//this.formPan.reset();
//Ext.getCmp('mainscreenpanelId').element.dom.parentElement.style['-webkit-transform'] = 'translate3d(0px, 0px, 0px)'
//--3rd commented line of code works, but after activate/on focus form again it comes to last scrolled position--
also, I checked if any method is there to scroll at the top, but didn't found.
Is there any way to do that.
below images more discribing my issue, screen is default when we open form first time
2nd Image remain srolled at bottom.
I have used window.scrollTo(0, 0) to scroll screen always top.
Try this.
I am developing a Wordpress website and I want the following: when the user lands on the homepage and scrolls down I want the website to slide to the next section. This has to work immediatly when the user touches its mouse scroller and only then. I am able to slide to certain anchorpoints but how can I achieve this after the user only touches his mouse scroll 1 time?
This is not a duplicate of the submitted question. I want the page to scroll to a certain div or section after the user only touches his mouse scroll once. No clicking
Set a flag, and listen to a scroll event. When the scroll event triggers check if the flag is off, flip the flag if it is and then to what you need to do. If the flag is already flipped don't do anything. Easy :D
I was viewing some Facebook photos. I observed this thing, when you click on an image, it opens as a modal overlay. The background is still hazily visible, the scroll pane is still there, but the scroll bar just disappears. Can anyone tell me how to do it? I mean, setting body's overflow to hidden will make the entire scroll pane disappear. Here the scrollpane is there, but the scrollbar is not..
i think what youre looking for is the osx-like scrollbar that fades out when not being used.
see Lion-like scrollbar with jQuery?