How to disable default scrolling on click

HTML:

<div class=”top”>Top</div>
<div class=”footer”>Footer</div>
<div class=”button”><a href=”javascript:void(0)”>Toggle scrolling</a></div>

CSS:

.top {
height:800px;
}

.button {
right:10px;
top:0px;
position:fixed;
}

Javascript:

// 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;
}

$(“.button a”).toggle(function(){disable_scroll();}, function(){enable_scroll();});

References:

http://jsfiddle.net/3Ku26/

http://baijs.nl/tinyscrollbar/

http://livepipe.net/control/scrollbar

Advertisements
Categories PHP