vue 弹框产生的滚动穿透问题
Vue 滚动 产生 穿透 弹框 问题
2023-09-11 14:16:54 时间
首先定义一个全局样式:
.noscroll{
position: fixed;
left: 0;
top: 0;
width: 100%;
}
创建一个dom.js文件,定义几个方法:
export function hasClass(el, className) {
let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
return reg.test(el.className)
}
export function addClass(el, className) {
if (hasClass(el, className)) {
return
}
if(el.className === ''){
el.className += className
}else{
let newClass = el.className.split(' ')
newClass.push(className)
el.className = newClass.join(' ')
}
}
export function removeClass(el,className) {
if (hasClass(el, className)) {
el.className = el.className.replace(new RegExp('(\\s|^)' + className + '(\\s|$)'), '');
};
}
获取<html>标签的DOM:
this.htmlDom = document.getElementsByTagName('html')[0];
在弹框弹出来的时候:
addClass(this.htmlDom, 'noscroll');
弹框关闭的时候
removeClass(this.htmlDom, 'noscroll');
这样就可以解决滚动穿透的问题了~
相关文章
- Vue笔记:vue项目引入bootstrap、elementUI、echarts
- vue.config.js
- vue+element列表排序
- [Vue @Component] Simplify Vue Components with vue-class-component
- vue.js3: 给滑动滚动添加上惯性(vue@3.2.26)
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- [Vue + TS] Create Type-Safe Vue Directives in TypeScript
- vue.js3: 给滑动滚动添加上惯性(vue@3.2.26)
- 一个典型的Vue应用的App.vue
- 常用网络js链接大全(jQuery(3.4.1)、bootstrap、vue、ECharts、easyUI、React、maven、Mybatis、Spring、SpringMVC、Redis)
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
- Vue组件库读取自定义配置文件
- 192:vue+openlayers: 选择feature,弹窗操作,删除所选feature
- 【vue】vue中如何实现组件封装、组件化开发及组件间传参_08
- vue实现鼠标拖拽div滚动效果-vue-dragscroll(整理)
- Vue 生命周期
- Vue学习笔记——vue-router