Develop Reference

Preventing user from scrolling a div on mobile

I've got a div that can move up and down, but it's scrolling is not controlled directly by the user. I've implemented the following code to prevent the user from scrolling this div.
$('.teamheading').bind('mousewheel DOMMouseScroll', function (e) { return false; });
This works great on desktop. It doesn't work on mobile though. Do you know what the mobile equivalent of this would be?
Thanks!

You can listen for the event
[div].addEventListener('scroll', function(e) {
// your code here
});

Prevent screen scrolling up when keyboard is shown in mobile Safari

I'm building an Angularjs app that has a at the bottom of one view.
Problem in mobile safari on iOS9:
When focusing the textarea the soft keyboard is shown and covers the lower part of the view.
How can I scroll the page up when the keyboard is visible so that the content (i.e. the textarea) is not covered?

Here is one way you might prevent scrolling. Add overflow:hidden to the document body when your inputs are in focus.
function toArray (collection) {
return Array.prototype.slice.call(collection);
}
function noScroll (event) {
if (event.type === 'focus') {
document.body.classList.add('no-scroll');
}
else if (event.type === 'blur') {
document.body.classList.remove('no-scroll');
}
}
var inputs = toArray(document.querySelectorAll('input'));
inputs.forEach(function(input){
input.addEventListener('focus',noScroll,false);
input.addEventListener('blur',noScroll,false);
});
.no-scroll {
overflow:hidden;
}
To scroll the page up, you could use document.body.scrollTop when the inputs are in focus and set the value to the desired location.

Scroll the page when a canvas is touch dragged

I have an HTML5 canvas that users interact with by clicking (or tapping).
$(function() {
var canvas = $('#annotations');
canvas[0].addEventListener('mousedown', clickCanvas);
canvas[0].addEventListener('touchstart', clickCanvas);
});
function clickCanvas(e) {
markLocation(e);
drawCanvas();
e.preventDefault();
}
This works as expected. However, on mobile devices if you tap and drag this registers a click at the point where the tap started (this makes sense because it's hooked up to touchstart). The page does not scroll as it normally does when you touch-drag outside the canvas.
When dragging, I would like the tap to be ignored and the whole page scrolled instead.

I was able to resolve this by:
Removing e.preventDefault();
Hooking up canvas[0].onselectstart = function () { return false; } to prevent text being selected when the canvas is double-clicked (this was what e.preventDefault() did in the first place)
Replacing touchstart with touchend

Prevent loss of element focus (Need cross-browser solution)

I'm using the following solution to prevent loss of focus of the #content textarea when the user has clicked on a .box element:
// Detect latest element clicked
$(document).mousedown(function(e) {
lastElClicked = $(e.target);
});
// Prevent loss of focus for textarea when clicking on tools
$("#content").on("blur", function(event) {
if (lastElClicked.attr('class') == 'box'){
event.preventDefault();
this.focus();
return false;
}
});
In a few words, on mouse down save the target element that has been clicked. On the blur of the #content textarea check if that last element clicked was a .box. If it was then prevent default, refocus the #content textarea and return false.
My solution works perfect under Chrome but I still loose focus under Safari and Firefox. How can I make this work cross browser?
EDIT:
The problem with the solutions offered is that the element actually looses focus and is refocused after. In Chrome with the code above I never actually loose fucus, which means selected text stays selected.

EDITED:
try this:
// Detect latest element clicked
$(document).mousedown(function(e) {
window.lastElClicked = $(e.target);
});
// Prevent loss of focus for textarea when clicking on tools
$("#content").on("blur", function(event) {
if (window.lastElClicked.attr('class') == 'box'){
event.preventDefault();
var that=this;
setTimeout(function(){
$(that).trigger('focus');
},200);
window.lastElClicked="";
return false;
}
});
Also this is a nice article on this bug which appears to be on Safari's part: http://bugs.jquery.com/ticket/7768
Alternatively you could try this one:
$('.box').click(function(event){
event.preventDefault();
$('input').each(function(){
$(this).trigger('blur');
});
setTimeout(function(){
$('#content').trigger('focus');
},200);
});
finally I have to mention that it still loses the focus on the highlighted text which seems to me as an impossible task to achieve in this case!

How to get shift+mousescroll event in jquery

I have 200 photos in my webpage, which has browser scroll and selection for that photos, i implemented shift selection functionality for photo selection. But i have issue in firefox that, when i select photo and press shift key and scroll down mouse the browser is navigating back and forth, Is there any practice to capture both shift + scroll event in firefox.
Thanks in advance

Try this, should work in both Chrome and Firefox.
$(document).on('mousewheel DOMMouseScroll', function(event) {
if (event.shiftKey) {
// do something.
}
})

You must return false in your event handler.
$(document).bind('mousewheel', function (event) {
// do your stuff
return false;
});