Hello everyone!
I copied some code to make a website unscrollable while certain elements are visible. However I need it to work only on desktop view, what do I need to add to this code to make it do that?
Thanks in advance!
var Webflow = Webflow || ;
Webflow.push(function () {
$(‘.link-block’).hover(function() {
document.addEventListener(‘touchmove’, stopWheel, {passive: false});
document.addEventListener(‘mousewheel’, stopWheel, {passive: false});
}, function() {
document.removeEventListener(‘touchmove’, stopWheel, {passive: false});
document.removeEventListener(‘mousewheel’, stopWheel, {passive: false});
});
function stopWheel(event){
var e = event || window.event;
e.preventDefault ? e.preventDefault() : 0;
e.returnValue = false; /* IE7, IE8 */
return false;
}
});
Hey @Marko_Vukic, you can wrap the codes within an if condition.
var desktop = 992; // Adjust this as you need.
$(window).on('load resize', function(){ // Run function on load and on resize.
if($(window).width() > desktop){
// Code you want to run here
}
});
in your case maybe something like this might work:
$(’.link-block’).hover(function() {
if($(window).width() > desktop){
document.addEventListener(‘touchmove’, stopWheel, {passive: false});
document.addEventListener(‘mousewheel’, stopWheel, {passive: false});
}
}, function() {
if($(window).width() > desktop){
document.addEventListener(‘touchmove’, stopWheel, {passive: false});
document.addEventListener(‘mousewheel’, stopWheel, {passive: false});
}
});
Hey Denny, thanks for quick response! I am extremely lacking in any programming skills, can you specifically tell me where do I put this second block of codes? eg. Below Webflow.push(function() { or do I just swap entire code with what you sent and if so do I need to change something in what you posted? Thanks!