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
});
Related
I am using three.js to allow users to create and edit a 3D model that involves using the scroll-wheel/two finger function, to zoom in and out. I want a second section of the page that is off the screen by default but the user can scroll down to see it. Preferably, this will be done only using the scroll bar, while the scroll-wheel can still be used.
For performance reasons, I'd prefer not to have to use something such as vue.js. Users provide data that remains on their computer that I'm using in both sections. This prevents me from just placing the data on another screen.
Overflow:hidden is out of the question because then I can not scroll to the bottom portion.
I tried using PreventDefault with several different EventListeners but none of them worked properly.
Below is the function that determines the size of the window and should include a function or the code to prevent scrolling.There aren't particular elements that shouldn't scroll, all of them shouldn't.
function onWindowResize() {
var viewWidth;
var viewHeight;
viewHeight=window.innerHeight-315;
//For Mobile
if(!UIactive && innerWidth < 640){
viewWidth= window.innerWidth;
//For Computer & Tablet
} else {
viewWidth= window.innerWidth -317;
if(window.innerHeight < 700){
viewHeight=window.innerHeight-52.67;
//Disable Scrollwheel
window.addEventListener('wheel',function(event){
//mouseController.wheel(event);
event.preventDefault();
}, false);
}
}
camera.aspect = (viewWidth) / (viewHeight);
camera.updateProjectionMatrix();
renderer.setSize(viewWidth, viewHeight);
UI.style.height= (viewHeight+'px');
}
Edit: I tried using the answer to a similar question. This did not achieve the desired result. I changed the code to be both window... and document... and a console.log statement included works but I can still scroll.
this.canvas.addEventListener('wheel',function(event){
mouseController.wheel(event);
return false;
}, false);
I then proceeded to try using preventDefault again and recieved the following error
Unable to preventDefault inside passive event listener due to target being treated as passive
Google Chrome docs say that,
With this intervention wheel/touchpad scrolling won't be blocked on document level wheel event listeners that do not need to call preventDefault() on wheel events.
Thus, you should apply the onmousewheel event on a specific div like so:
<div id="ScrollableDiv" style="height : 900px;background-color : red">
</div>
function stop(){
return false;
}
var div = document.getElementById('ScrollableDiv');
div.onmousewheel= stop;
Please refer this working fiddle.
I have a simple HTML form where the input elements (text boxes) are centered on the page. Problem is on mobile devices (specifically Android) when the keyboard comes up, it covers some of these elements. Even when I tap next while filling out the form, the page doesn't scroll to reveal the hidden elements. Any suggestions? Is there some JavaScript or CSS that I can add?
Try using onfocus javascript event. If You use JQuery, you can use this sample, which, if device is touch screen device, scrolls input to very top of viewport on every input focus event.
function isTouchDevice() {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
$("input").focus(function(){
if( isTouchDevice() ){
$('html, body').animate({
scrollTop: $(this).offset().top
}, 1000);
}
})
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
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;
});
I have this:
function dontMove(event) {
// Prevent page from elastic scrolling
event.preventDefault();
}
&
<body ontouchmove="dontMove(event);">
This, on the ipad, stops it from being draggable and does not allow that grey background the ipad has when you drag a whole page around to show up.
I have seen on another website that its possible to reverse that in another div, so that div is completely draggable again.
Does anyone know how to reverse it?
I have also tried using this to prevent it (in the document.ready):
document.ontouchmove = function(e){
e.preventDefault();
}
& this to enable it:
function doTouchMove(state) {
document.ontouchmove = function(e){
return state;
}
}
Then I put this to activate it.
<img ontouchmove="doTouchMove(state);" src="../jpeg/pages/01.jpg" class="touch"/>
This didn't seem to work
Is there anything wrong with this?
Or any other way that might work?
This is exactly why bubbles is slightly better(at least in my opinion).
bubbles is cross browser, so you should be able to replace.
e.preventDefault()
with
e.bubbles = false;
and then latter in your code, you could potentially reset bubbles to true.
If the above isn't an option then just ignore. :D
An alternative(if you are just working with an iPad) is to just reverse how the DOM works.
document.addEventListener('click', function(){}, true );
This will force the event to work in the other direction.
Document click execute
|
|
v
Element click execute
try this post, HTML with event.preventDefault and erase ontouchmove from body tag.
Mine looks like this
<script>
// Get touch move enevt from IOS
document.ontouchmove = function (event) {
if (!event.elementIsEnabled)
event.preventDefault();
};
// Get touch move enevt from IOS
function enableOnTouchMove(event) {
event.elementIsEnabled = true;
};
</script>
then enable ontouchmove on every tag you want. ie:
<div ontouchmove="enableOnTouchMove(event)" id="listing">
I managed to solve it with
$('#form1').unbind('submit').submit();
You can solve it by preventing the event only if it comes from the body:
document.ontouchmove = function(event){
if(event.target.tagName == "BODY"){
event.preventDefault();
}
}