解决fullPage中使用dialog时滑动冲突问题

最初都是小白

已于 2022-06-21 15:09:19 修改

阅读量528

点赞数 1

分类专栏： Vue 文章标签： javascript 前端 html5

于 2022-06-21 15:07:46 首次发布

本文链接：https://blog.youkuaiyun.com/Originally_M/article/details/125391369

版权

Vue 专栏收录该内容

36 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中使用fullpage.js库，并通过`$refs`调用API来控制页面滚动。在弹窗显示时，通过`setAutoScrolling(false)`禁止页面滑动，同时设置body的overflow为hidden。当弹窗隐藏时，恢复页面滑动功能，调用`setAutoScrolling(true)`。这种方法确保了对话框出现时用户的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

给fullPage加ref 后使用fullPage的api

	//dialog显示
    dialogShow(){
      // this.$refs.fullpage.api.setAllowScrolling(false); //禁用鼠标滚动这个会有问题，所以要用setAutoScrolling属性
      this.$refs.fullpage.api.setAutoScrolling(false); //禁止滑动
      document.querySelector('body').style.overflow ="hidden"
    
    },
    //dialog隐藏
    dialogHide(){
        this.$refs.fullpage.api.setAutoScrolling(true); //放开滑动
    },