Custom code on some viewpoints

Community resources Webflow Tips
1

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;

}
});

2

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});
  } 
});
4

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!