基本上,我正在使用的WordPress主题正在使用fullpage.js。
现在,我在页面内部手动创建了一个滚动框div。当鼠标位于该滚动框div中时,如何禁用全页滚动,使其正常工作?
我找到了这个fullpage.js: disable page scroll when scrolled with the mouse pointer inside a container,但我不知道如何正确地将其设置为.scroll-box
.scroll-box {
width: auto;
height: 150px;
overflow: auto;
padding: 0 5%;
}
<div class="scroll-box">
<p style="font-weight: bold;">Industry:
Business, Finance</p>
<p style="font-weight: bold;">Objective:
User acquisition, User engagement</p>
<p style="font-weight: bold;">Services provided:
Performance Marketing, Design</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et odio purus. In volutpat, nisi ac malesuada volutpat, nisl magna vehicula leo, et posuere nunc nunc in nisl. Etiam facilisis convallis luctus. Aliquam nec luctus libero. Ut tincidunt ut massa sed malesuada. Aenean dolor orci, laoreet a imperdiet id, maximus id elit. Ut consequat tortor ac dui sollicitudin, non lacinia ante feugiat. Integer in orci sem. Nam tempus libero in enim efficitur dapibus. Nunc consequat lacinia libero quis convallis. Nunc vulputate interdum diam eget cursus.
Maecenas purus nisi, sodales quis turpis nec, luctus fringilla leo. Integer dapibus interdum risus nec tincidunt. Morbi pretium sit amet mi quis ullamcorper. Integer tempus hendrerit enim, aliquet finibus dolor molestie sed. Donec ac eleifend diam, at gravida eros. Mauris malesuada dolor at magna facilisis finibus. Vivamus fringilla nisi non sapien vestibulum scelerisque in vel libero. Sed mattis rhoncus pulvinar. Suspendisse quam urna, hendrerit quis libero quis, maximus laoreet sem. Maecenas vestibulum massa in mattis rutrum. Proin eu finibus nibh. Mauris quis nibh sit amet nibh posuere pulvinar quis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
最佳答案
当您可以访问new fullpage()
的调用位置时,可以使用CSS选择器语法:
const fullpage = new fullpage('#fullpagediv', { normalScrollElements: '.scroll-box' })
希望能帮助到你。
关于javascript - 当鼠标位于某个div中时,禁用fullpage.js,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/54499748/