I have a <div> that is a full viewport container, inside the container I have some other divs that I move up or down based on user mousewheel scroll, even if the page never move because it doesn't scroll.
$(window).bind('mousewheel', function(e){
// animate my objects inside viewport
});
on mobile phones and tablet I need to intercept user drag, even if is not really dragging anything, is most like a gesture UP or DOWN
How can I do it?
Related
I have a container that holds a chart and I wanted to allow the user to click and drag to pan the chart. It works fine until the user drags the mouse outside the container and then the chart is scrolled rapidly in the wrong direction. This seems to be caused by the default scrolling behavior for example if you click and drag in any other element with a scrollbar and drag the mouse out of it, it will begin to scroll.
Is there a way to disable this behavior or some workaround that could make this work?
I only need this to work in chrome (for now at least)
Check out this site. They are using a jQuery plugin dragscrollable, which you can look up or get it from the view source on that page.
I'm using "-webkit-overflow-scrolling": "touch" to show the scrollbar on a scrollable element on iPad.
The scroll button appears only when i'm touching the screen but I would like to be permanently visible so the user can see that there is more content.
Any suggestions?
There is no function available to make scrollbar permanently visible. But if you want to implement some thing like this, you should customize this using delegate function for UIScrollView.
Doc: http://developer.apple.com/library/ios/#documentation/uikit/reference/UIScrollView_Class/Reference/UIScrollView.html
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.
I've got a checkScroll handler attached to a div's scroll event (soon to be implemented as a timer instead), which checks to see if the user is nearing the bottom and fetches more data to display. The UI is smooth and works well when used with the mouse scroll wheel, but when dragging the scrollbar the following occurs:
checkScroll handler determines user is near the bottom (and for example, let's say scrollTop is 800)
an AJAX request is sent in the background to fetch more data
data is returned and appended to the div
if the scrollbar is still in drag mode, but the mouse hasn't moved since the data has been appended the scrollbar has now changed size and jumped up a bit, scrollTop is still set to 800 and the data is in the same position
once the mouse is dragged 1px in any direction, the scrollbar jumps back under the mouse and all the data has shifted, the user has lost their original position
Is there a way to prevent this from happening, a la Twitter?
This is standard browser behaviour, Firefox will make the content jump but Chrome keeps the current position when increasing the scrollHeight
PS. How do you close a question as invalid?
It is possible to scroll an iframe by mouse coordinates on mouse move event?
I think what your trying to do is a drag scroll for a div. Check this site out.
This is a demo to a Jquery Plugin that allows you to use mouse down events to drag your scroll area. Simular to that of an Ipod touch or Iphone, but instead of a finger you use your mouse down
http://hitconsultants.com/dragscroll_scrollsync/scrollpane.html