Is it possible to prevent the page from scrolling while dragging items from mobile devices?
Even the sortable demo page has this problem (if you load it from an android/iphone/ipad): http://www.telerik.com/kendo-angular-ui/components/sortable/
Dragging sideways is less of an issue due to no scroll being necessary due to the width but vertical dragging is not working as I would expect.
It's pretty "brute force" and could limit your ability to drag an element to a position outside the current viewport, but adding a class with the style or directly adding the style of overflow: hidden to the html element while the item drag is active will prevent scrolling.
I've done this for modal windows to prevent the page in the back from scrolling while the modal is active.
Last time I used it a cross-browser issue required the use of overflow: hidden !important if it's not working for you.
Related
I have a problem with dragging an element below the viewport. When I try to drag the element below the viewport the page will not autoscroll. As you can see in the image I have provided I am trying to drag an element below. The only way I can scroll below the viewport to drop my element in Firefox is to use the mouse wheel.
If I left click and hold while dragging down on this Stack Overflow page the viewport autoscolls downward. This is how I need my web app to perform.
I'm not really sure where to start with this as it is a paid WordPress plugin called Learndash that not properly coded.
Can anyone point me to the correct solution to this problem?
Thanks.
Checkout this link to automatically scroll the window.
https://www.bennadel.com/blog/3460-automatically-scroll-the-window-when-the-user-approaches-the-viewport-edge-in-javascript.htm
Edit:
Add a margin below your div to allow space to insert
Or add the CSS properties height:500px and overflow-y:scroll in your div
I have a mobile web map application within an overflow: hidden body. There is a map legend which is partially hidden on the right side of the body and a menu which is partially hidden on the bottom of the body.
The idea is to click on the partially visible part of the control and have the control slide into view.
The bottom menu is higher than the body and should therefore be scrollable in the y direction.
The problem is that I can either prevent scrolling by preventing the default on the touchmove event handler or that I enable the scrolling which means that clicking on the menu allows to move the whole body of the application all over the shop.
The application can be accessed here https://geolytix.net/mobilemap
I use Google Chrome dev tools responsive view to test the touch scroll behaviour.
I disable the scrolling on the legend item but I cannot disable the scrolling on the large menu slider on the bottom.
What I am trying to prevent is that the user just pushes the menu off the screen like so:
One way would be to add to your css
html, body {position: fixed;}
to prevent the possibility of scrolling.
Now, to make your Menu scrollable you add to your css the following lines
#sliderPanel {height: 100%;overflow-y: scroll;}
You can now scroll the Menu on the y-Axis.
I'm putting the finishing touches on this parallax website but I'm having trouble preventing some very unattractive horizontal scrolling effects (try it yourself on a touch device by dragging directly to the left).
I've adapted the parallax technique described here using 3D CSS transforms. Unfortunately, one of the side-effects seems to be that the browser thinks the images are wider than the viewport, even though they aren't. I've already tried:
Adding overflow-x: hidden; to the parallax images' containing div, and while that's hidden the horizontal scrollbar, it alone does not actually prevent horizontal scrolling.
Adding a partial workaround scroll event listener to reset the scrollLeft of the container back to 0 with each scroll, which solves the problem entirely on desktop (AFAICT) and partly on mobile (at least when scrolling diagonally).
Unfortunately, it seems that, at least on Android (I don't have an iPhone to test) it's still possible to scroll horizontally without triggering the scroll event workaround. Even more mystifying, while it's in this weird horizontally-scrolled mode I've programmatically traversed the entire DOM and not a single element has a scrollLeft property != 0. I've also called $('*').scrollLeft(0); from the console and it doesn't reset the scrolling. Now calling .preventDefault() on all touchmove events does prevent the horizontal scrolling, but it also effectively breaks the site as a whole since it prevents vertical scrolling too--so that's a no-go.
So how is this thing scrolling horizontally if nothing has a scrollLeft other than 0, and how can I prevent/workaround this scrolling behavior?
I'm using full-screen modals on my site on mobile. The problem is that touching the modal will cause the body page to move even though it's overflow:hidden;
Here's what bootstrap says about that:
Support for overflow: hidden on the element is quite limited in
iOS and Android. To that end, when you scroll past the top or bottom
of a modal in either of those devices' browsers, the content
will begin to scroll.
What can I do to prevent that?
Setting the body to position:fixed causes the scroll to jump to the top in an ugly way. What's the best solution if anyone came up with one?
I had the same question myself before.
What I did is changed the body to overflow:hidden and fixed height equal to modal height and remembered document scroll position. After closing the modal, I've applied remembered scroll position back and height to auto.
It is so complicated because I needed my modals to be bigger than window and I wanted to be able to scroll the modal.
I'm building a mobile app using HTML, CSS, Javascript and jQuery.
Is there a way to scroll a div that is longer (700px) than the mobile screen (480px) using only two buttons, one for down and one for up?
So when a user presses and holds the down button it appears to scroll down the div by about 10px at a time.
Edit:
The mobile app is actually being compiled with Phonegap, so it won't be a mobile website but an actual application.
The application features dragging and dropping quite heavily and in order to do this using JQuery and HTML, I've had to bind the mousedown, mouseup and mousehover events to touch events.
Because of this the user cannot simply drag the screen to scroll as they would a typical application. Therefore, I have decided to go with physical buttons instead of scrolling the navigation div.
The navigation div is set to have a greater height than the canvas (screen height and width) div. This will be the div the user is scrolling.
Is the div you're talking about scrolling the full page itself? Or is it a specific div that you want to "scroll" within the page (kind of like an iframe)?
Both can be done. If you're scrolling the full page, I'm not sure why you'd want to use buttons rather than let Safari simply handle the standard swipe gestures. But, it could be done this way:
Use fixed positioning on the buttons so that they don't move as the rest of the screen scrolls.
Use use jQuery's .scrollTop method to do the scrolling.
If, on the other hand, you want to make a scroll effect on a single div, without the rest of the page scrolling, then just do the following:
Wrap that div in another div that has overflow:hidden; position:relative
Make the inner div position:absolute
Animate the inner div's top property to create the scrolling effect.
You may find this plugin useful: http://logicbox.net/jquery/simplyscroll/vertical.html
Anyway, why would you need that? The user may be able to scroll normally with a finger swipe if the content is bigger than the screen.