javascript - IntroJS 滚动不起作用

Question

我在我的页面上使用 IntroJs 来展示导览。一般来说一切正常，但有一个问题:

在一个页面上，IntroJS 无法滚动，因为我有一个类似 div 的东西，它在 div 本身上滚动，所以不是整个页面都在滚动，但 div 是可滚动的。现在，当我在当前可查看的元素上定义游览元素时，一切正常，但如果您必须在 div 中向下滚动，它就不再起作用(它实际上试图向下滚动整个页面并显示茫茫荒野中的一步。

我是这样定义游览的:

this.intro = introJsModule.introJs();
    this.intro.setOptions({
      steps: [
        {
          intro: "Hello user!"
        },
        {
          element: '.checkbox',
          intro: "This is a checkbox"
        },
        {
          element: '#inputHor1',
          intro: "This input looks very nice."
        },
        {
          element: '#anotherID',
          intro: "This is the first section"
        }
      ]});
    this.intro.setOption('showStepNumbers', false);
  }

  startIntro() {
    this.intro.start();
  }

有什么办法可以解决这个问题吗？

PS:我的意思(在我的网站上)类似于 here .所以右边的部分是我定义步骤的地方，当需要向下滚动时它不起作用。实际上唯一的区别是，我的滚动条也在“右侧的 div”内，所以我不会滚动整个页面。

Answer 1

我们可以看到您正在使用的 js 吗？

猜测:

onscroll 事件仅在以下情况下有效:

• div 有 overflow: auto, overflow: scroll, overflow-y: scroll,等
• div 当前有一个可以滚动的可见滚动条。
• 鼠标移动实际上会导致滚动条滚动。

您也可以尝试使用 onmousewheel 事件而不是 onscroll(如果您使用的是..)