Develop Reference

How to prevent the user from interrupting window.scrollTo()?

I have a piece of code which uses window.scrollTo(), and I want to stop the user from interrupting the scrolling until it is finished.
let isMoving = false;
const scroll_keys = { 37: 1, 38: 1, 39: 1, 40: 1 };
preventDefault = e => {
console.log(isMoving);
if (!isMoving) return;
e = e || window.event;
if (e.preventDefault) e.preventDefault();
e.returnValue = false;
};
preventDefaultForScrollKeys = e => {
if (!isMoving) return;
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
};
document.addEventListener('wheel', preventDefault, { passive: false });
document.addEventListener('DOMMouseScroll', preventDefault, { passive: false });
document.addEventListener('scroll', preventDefault, { passive: false });
window.ontouchmove = preventDefault;
document.onkeydown = preventDefaultForScrollKeys;
function scrollTo(offset, callback) {
const onScroll = () => {
const scrollTop = window.scrollTop || window.pageYOffset;
if (scrollTop === offset) {
window.removeEventListener('scroll', onScroll);
callback();
}
};
window.addEventListener('scroll', onScroll);
onScroll();
window.scrollTo({
top: offset,
behavior: 'smooth',
});
}
I set isMoving = true before the call to window.scrollTo, and set it back to false in the callback, like this:
isMoving = true; scrollTo(0, () => { isMoving = false; });
I expect this to completely prevent the user from interrupting the scrolling but it doesn't work properly. It seems to work, but not every time, and it seems quite buggy.

how to enable scrolling for specific div block in javascript

I have disabled window scroll for the page but i want to enable scroll for specific div block. Now i can able to disable and enable the scroll & mouse wheel, it is working fine. but i want to enable scroll in specific div block. please tell where i made mistake.
The code
var $window = $(window), previousScrollTop = 0, scrollLock = false;
$window.scroll(function(event) {
if(scrollLock) {
$window.scrollTop(previousScrollTop);
}
previousScrollTop = $window.scrollTop();
});
$("#template").click(function() {
scrollLock = true;
disableScroll();
});
$("#close, .clear").click(function() {
enableScroll();
scrollLock = false;
});
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}
function disableScroll() {
if (window.addEventListener)
window.addEventListener('DOMMouseScroll', preventDefault, false);
window.onwheel = preventDefault;
window.onmousewheel = document.onmousewheel = preventDefault;
window.ontouchmove = preventDefault;
document.onkeydown = preventDefaultForScrollKeys;
}
function enableScroll() {
if (window.removeEventListener)
window.removeEventListener('DOMMouseScroll', preventDefault,
false);
window.onmousewheel = document.onmousewheel = null;
window.onwheel = null;
window.ontouchmove = null;
document.onkeydown = null;
}
// enabling scroll for specific div block
$('.slide').on('scroll mousewheel touchmove', function(e) {
e.preventDefault();
enableScroll();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Some text......</div>
<div class="slide">I want to enable scroll for this block only</div>
Thanks advance

For only vertical scroll:
<div style="overflow-y: scroll">
For only horizontal scroll:
<div style="overflow-x: scroll">
For both:
<div style="overflow: scroll">
To hide the scroll bar:
use hidden value for overflow attribute.

You can do it using css
.test{
overflow: hidden;
}
.slide{
height: 20px;
overflow: auto;
}
var $window = $(window), previousScrollTop = 0, scrollLock = false;
$window.scroll(function(event) {
if(scrollLock) {
$window.scrollTop(previousScrollTop);
}
previousScrollTop = $window.scrollTop();
});
$("#template").click(function() {
scrollLock = true;
disableScroll();
});
$("#close, .clear").click(function() {
enableScroll();
scrollLock = false;
});
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}
function disableScroll() {
if (window.addEventListener)
window.addEventListener('DOMMouseScroll', preventDefault, false);
window.onwheel = preventDefault;
window.onmousewheel = document.onmousewheel = preventDefault;
window.ontouchmove = preventDefault;
document.onkeydown = preventDefaultForScrollKeys;
}
function enableScroll() {
if (window.removeEventListener)
window.removeEventListener('DOMMouseScroll', preventDefault,
false);
window.onmousewheel = document.onmousewheel = null;
window.onwheel = null;
window.ontouchmove = null;
document.onkeydown = null;
}
// enabling scroll for specific div block
$('.slide').on('scroll mousewheel touchmove', function(e) {
e.preventDefault();
enableScroll();
});
.test{
overflow: hidden;
}
.slide{
height: 18px;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="template">Disable</div>
<div class="test">Some text......</div>
<div class="slide">I want to enable scroll for this block only <br>I want to enable scroll for this block only<br>I want to enable scroll for this block only </div>

javascript shortcut key / stop Interval function

i make a shortcut key for javascript function . i set the S key for start this and i so set the Z key for clear Interval function but im tired about this and when press Z key the Interval doesnt stop :(
var isCtrl = false;
document.onkeydown=function(e){
if(e.which == 83) {
var elem = document.elementFromPoint( cursorX,cursorY );
elem.addEventListener('click', function() {
console.log('clicked')
}, false);
var support = true;
try {
if (new MouseEvent('click', {bubbles: false}).bubbles !== false) {
support = false;
} else if (new MouseEvent('click', {bubbles: true}).bubbles !== true) {
support = false;
}
} catch (e) {
support = false;
}
var refreshIntervalId = setInterval(function() {
if (support) {
var event = new MouseEvent('click');
}else{
var event = document.createEvent('Event');
event.initEvent('click', true, true);
}
elem.dispatchEvent(event);
},10);
var cursorX;
var cursorY;
cursorX = 0; cursorY = 0;
document.onmousemove = function(e){
cursorX = e.clientX;
cursorY = e.clientY;
elem = document.elementFromPoint(e.clientX, e.clientY);
}
if(e.which == 90) {
clearInterval(refreshIntervalId);
}
}
}
help me i want to press Z key and Interval stop but i can`t ...
UPDATE : this code work correctly . use S key for start and Z key for stop the function .
var elem = document.elementFromPoint( cursorX,cursorY );
elem.addEventListener('click', function() {
console.log('clicked')
}, false);
var support = true;
try {
if (new MouseEvent('click', {bubbles: false}).bubbles !== false) {
support = false;
} else if (new MouseEvent('click', {bubbles: true}).bubbles !== true) {
support = false;
}
} catch (e) {
support = false;
}
var cursorX;
var cursorY;
cursorX = 0; cursorY = 0;
document.onmousemove = function(e){
cursorX = e.clientX;
cursorY = e.clientY;
elem = document.elementFromPoint(e.clientX, e.clientY);
}
var refreshIntervalId;
window.addEventListener("onkeydown", keyDown,true);
window.addEventListener("keydown", keyDown);
function keyDown() {
var e = window.event;
switch (e.keyCode) {
case 83:
start();
break;
case 90:
stop();
break;
}
}
function start() {
stop();
refreshIntervalId = setInterval(function() {
if (support) {
var event = new MouseEvent('click');
}else{
var event = document.createEvent('Event');
event.initEvent('click', true, true);
}
elem.dispatchEvent(event);
},1000);
}
function stop() {
if (refreshIntervalId != null) {
clearInterval(refreshIntervalId);
refreshIntervalId = null;
}
}

You also have to code it in a way to avoid starting the timer more than once. You should construct it more like this (move the var for the timer outside the function):
var refreshIntervalId;
window.addEventListener("onkeydown", keyDown,true);
window.addEventListener("keydown", keyDown);
function keyDown() {
var e = window.event;
switch (e.keyCode) {
case 83:
start();
break;
case 90:
stop();
break;
}
}
function start() {
stop();
refreshIntervalId = setInterval(function() {
// code...
},10);
}
function stop() {
if (refreshIntervalId != null) {
clearInterval(refreshIntervalId);
refreshIntervalId = null;
}
}

You doesn't seem to make an event to listen to keypress.
jQuery:
$(window).keypress(function(e) {
if (e.which == 90) {
clearInterval(refreshIntervalId);
}
});
Vanilla JS:
var keyEvent = function (e) {
if (e.which == 90) {
clearInterval(refreshIntervalId);
}
};
window.addEventListener('keypress', keyEvent);

Fullcalendar mousewheel event prev next

i'm trying to do a simple think in Fullcalendar ( 1.6.2 ) and is to simulate the prev and next button throught the mouse wheel up and down, similar to google calendar.
Here is the code i'm using, this code is from another question in here i think, but i can´t remember wich one :S
calendar.bind('mousewheel', function(event, delta) {
var view = calendar.fullCalendar('getView');
//alert(view.name); //Can retrieve the view name successfully
//alert(delta); // Undefined
//alert(event); // [Object object]
if (view.name == "month") {
if (delta > 0) {
alert(delta);
calendar.fullCalendar('prev');
}
if (delta < 0) {
alert(delta);
calendar.fullCalendar('next');
}
return false;
}
});
The problem is delta is Undefined
Anyone have a clue what i'm doing wrong? I'm very new to Jquery or Javascript
EDIT
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel";
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = [37, 38, 39, 40];
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function keydown(e)
{
for (var i = keys.length; i--;) {
if (e.keyCode === keys[i]) {
preventDefault(e);
return;
}
}
}
function wheel(e) {
preventDefault(e);
}
function disable_scroll()
{
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = wheel;
document.onkeydown = keydown;
}
function enable_scroll()
{
if (window.removeEventListener) {
window.removeEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = document.onkeydown = null;
}
calendar.bind(mousewheelevt, function(e)
{
var evt=window.event || e;
var delta=evt.detail ? evt.detail*(-120) : evt.wheelDelta;
if(delta > 0){
calendar.fullCalendar('next');
}
if(delta < 0){
calendar.fullCalendar('prev');
}
});
calendar.bind("mouseleave", function()
{
enable_scroll();
});
calendar.bind("mouseenter", function()
{
disable_scroll();
});
Most of this code was copied from the net i have just adapt it to my problem.
This works in Chrome ( latest version ) and I.E ( lastest version )
Doesn´t work in Firefox ( lastest version )
Didn´t check in old versions of any of them.
Can anyone see the problem of not working in FF?

I think i got it, its a bit hacky but it does the trick!!! Any constructive critics are welcome. This is now working in IE, Firefox, Chrome recent versions.
//This checks the browser in use and populates da var accordingly with the browser
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel";
//Prevents the scroll event for the windows so you cant scroll the window
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
//I think this could be eliminated but in the examples i found used it
function wheel(e) {
preventDefault(e);
}
//adds the scroll event to the window
function disable_scroll(){
if (document.attachEvent) //if IE (and Opera depending on user setting)
document.attachEvent("on"+mousewheelevt, wheel);
else if (document.addEventListener) //WC3 browsers
document.addEventListener(mousewheelevt, wheel, false);
}
//removes the scroll event to the window
function enable_scroll()
{
if (document.removeEvent) //if IE (and Opera depending on user setting)
document.removeEvent("on"+mousewheelevt, wheel);
else if (document.removeEventListener) //WC3 browsers
document.removeEventListener(mousewheelevt, wheel, false);
}
//binds the scroll event to the calendar's DIV you have made
calendar.bind(mousewheelevt, function(e){
var evt = window.event || e; //window.event para Chrome e IE || 'e' para FF
var delta;
delta = evt.detail ? evt.detail*(-120) : evt.wheelDelta;
if(mousewheelevt === "DOMMouseScroll"){
delta = evt.originalEvent.detail ? evt.originalEvent.detail*(-120) : evt.wheelDelta;
}
if(delta > 0){
calendar.fullCalendar('next');
}
if(delta < 0){
calendar.fullCalendar('prev');
}
});
//hover event to disable or enable the window scroll
calendar.hover(
function(){
enable_scroll();
console.log("mouseEnter");
},
function(){
disable_scroll();
console.log("mouseLeave");
}
);
//binds to the calendar's div the mouseleave event
calendar.bind("mouseleave", function()
{
enable_scroll();
});
//binds to the calendar's div the mouseenter event
calendar.bind("mouseenter", function()
{
disable_scroll();
});

Cross-browser method to disable vertical scrolling of window using JS/jQuery

I need to disable window scrolling when I mouseover a specific div and enable it on mouseout. But it's necessary to keep scrollbars, so overflow: hidden will not help.
I wrote a bit of JS, but it's to buggy in IE9 and Opera.
var win_scrolltop, is_mydiv_mouseovered = false;
$('#mydiv').hover(
function(){
win_scrolltop = $(window).scrollTop();
is_mydiv_mouseovered = true;
},
function() {
is_mydiv_mouseovered = false;
}
)
$(window).scroll(function() {
if (is_mydiv_mouseovered) $(window).scrollTop(win_scrolltop);
});

I found this answer, fiddled a little and result is this:
var scrollThing = {
// 33: PageUp, 34: PageDown, 35: End, 36: Home, 37: Left, 38: Up, 39: Right, 40: Down
keys: [33, 34, 35, 36, 37, 38, 39, 40],
preventDefault: function(e) {
e = e || window.event;
if (e.preventDefault) {
e.preventDefault();
}
e.returnValue = false;
},
keydown: function(e) {
for (var i = scrollThing.keys.length; i--;) {
if (e.keyCode === scrollThing.keys[i]) {
scrollThing.preventDefault(e);
return;
}
}
},
disable: function() {
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', scrollThing.preventDefault, false);
}
window.onmousewheel = document.onmousewheel = scrollThing.preventDefault;
document.onkeydown = scrollThing.keydown;
},
enable: function() {
if (window.removeEventListener) {
window.removeEventListener('DOMMouseScroll', scrollThing.preventDefault, false);
}
window.onmousewheel = document.onmousewheel = document.onkeydown = null;
}
}
$('#mydiv').hover(scrollThing.disable, scrollThing.enable);
Working example.