vue 弹框产生的滚动穿透问题的解决
最近开发过程中遇到一些小问题(似乎问题总是那么多)，但一直没什么时间去优化与解决。程序员不能被业务绑架，有时间还是花点在代码，开始这次的vue尝试吧。
首先定义一个全局样式：
.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中的事件穿透与禁止穿透实例详解的使用技巧和注意事项，需要的朋友参考一下 在开发过程中经常遇到的一个场景，就是，页面弹窗，弹窗上有一个确定或者关闭按钮,这时，如果下方有一个按钮，那你点击弹窗的时候，也会触发弹窗下层的按钮事件，vue提供的解决方法就是直接在click.stop js的解决办法是，直接在事件的方法中添加event.st
-
一个下拉框控件，在谷歌浏览器显示正常，但是在火狐浏览器下显示为如下效果： 即下拉列表在点开的一瞬间穿过了下方的元素，然后再显示正常 求解
-
主要内容：1 缓存穿透,1.1 什么是缓存穿透？,1.2 怎么解决,1.3 Bloom Filter布隆过滤器,2 缓存雪崩,3 缓存击穿,4 缓存预热,5 防止Redis宕机详细介绍了Redis的缓存穿透、缓存雪崩、缓存击穿等问题的概念与解决办法。 1 缓存穿透 1.1 什么是缓存穿透？ 缓存穿透是指查询一个在缓存和数据库中一定不存在的数据，按照传统使用缓存流程:由于缓存不命中，接着查询数据库，但是数据库也无法查询出结果，因此也不会将空值写入到缓存中，这将会导致每个这样的查询都会去请求数据库，
-
本文向大家介绍vue中利用iscroll.js解决pc端滚动问题，包括了vue中利用iscroll.js解决pc端滚动问题的使用技巧和注意事项，需要的朋友参考一下 项目中经常遇到区域超出部分会出现滚动条，滚动条在pc端可以通过鼠标滚轮控制上下，在移动端可以通过鼠标拖动页面进行滚动，这两种场景都是符合用户习惯，然而这种滚动条一般都是竖【vertical】项滚动条，如果pc端出现横向滚动条【horiz
-
本文向大家介绍移动端滚动穿透是什么原因？有哪些解决方案？相关面试题，主要包含被问及移动端滚动穿透是什么原因？有哪些解决方案？时的应答技巧和注意事项，需要的朋友参考一下 https://segmentfault.com/a/1190000020321154
-
如何修改angular穿梭框的总数统计，只显示角色下面的数据，怎么修改统计数据方法。 <nz-transfer