fullpage.js开启scrollOverflow:true时slick.js左键拖拽失效求助

Hey there, let's work through this frustrating conflict between fullpage.js and slick.js! I’ve dealt with this exact issue before when using fullpage’s scrollOverflow: true (which relies on IScroll under the hood) alongside slider libraries, so I know exactly what’s causing it and how to fix it.

What’s the Root Cause? #

When you enable scrollOverflow: true, fullpage initializes IScroll to handle scrolling for content-heavy sections. IScroll is designed to intercept mouse left-click drag events (treating them as scroll gestures) and stops those events from propagating further down the DOM. That’s why slick.js can’t pick up left-click drags—those events are being blocked by IScroll. Right and middle clicks aren’t intercepted by IScroll, which is why they work fine.

Solutions to Try (Ordered by Effectiveness) #

1. Configure IScroll to Exclude Your Slick Container

Fullpage lets you pass custom options to IScroll via scrollOverflowOptions. We can use preventDefaultException to tell IScroll not to block events on your slick container. This is the cleanest fix because it targets the conflict at the source.

new fullpage('#fullpage', {
  scrollOverflow: true,
  scrollOverflowOptions: {
    // Tell IScroll to skip preventing default events on elements matching this selector
    preventDefaultException: {
      class: /^your-slick-container-class$/ // Replace with your actual slick container class
    },
    // Optional: Disable mouse wheel if you don't need it for this section (reduces conflict risk)
    mouseWheel: false,
    // Optional: Boost event listening precision
    probeType: 3
  }
});

Make sure to replace your-slick-container-class with the actual class name of the element you initialized slick on. This tells IScroll to leave mouse events on that container alone, so slick can handle left-click drags normally.

2. Stop Event Propagation on Slick Elements

If the first method doesn’t work, you can manually prevent slick’s drag events from bubbling up to IScroll’s container. Add this after initializing slick:

// Target your slick slider and its slides
$('.your-slick-container-class').on('mousedown touchstart', '.slick-slide', function(e) {
  // Block the event from reaching IScroll's parent container
  e.stopPropagation();
});

This ensures that when a user clicks and drags on a slick slide, the event stays within slick’s scope instead of being intercepted by IScroll.

3. Delay Slick Initialization Until Fullpage is Fully Rendered

Sometimes IScroll finishes initializing after slick, which can lead to event binding issues. Use fullpage’s afterRender callback to initialize slick only after fullpage has set up all its components:

new fullpage('#fullpage', {
  scrollOverflow: true,
  afterRender: function() {
    // Initialize slick once fullpage is ready
    $('.your-slick-container-class').slick({
      draggable: true,
      slidesToShow: 3,
      slidesToScroll: 1,
      // Add your other slick options here
    });
  }
});

Final Notes #

Start with solution 1—it’s the most direct and least hacky. If that doesn’t resolve the issue, move to solution 2, then 3. All of these should get your slick left-click drag working alongside fullpage’s scrollOverflow.

内容的提问来源于stack exchange，提问作者minlare