遮罩层禁止滚动条
时间: 2023-07-07 21:25:46 浏览: 66
要禁止遮罩层下面的网页滚动条,可以给遮罩层设置样式`position: fixed;`和`overflow-y: scroll;`,然后通过JavaScript的方式禁止body元素的滚动条,例如:
```javascript
var body = document.getElementsByTagName('body')[0];
body.style.overflow = 'hidden';
```
这样就可以禁止遮罩层下面的网页滚动条了。当遮罩层消失时,需要将body元素的overflow属性还原回去,例如:
```javascript
body.style.overflow = 'auto';
```
相关问题
vue3的项目中遮罩层去掉滚动条
在Vue3的项目中,可以通过以下步骤去掉遮罩层下方的滚动条:
1. 在遮罩层的样式中,设置`position: fixed`和`overflow-y: scroll`,例如:
```css
.mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 999;
overflow-y: scroll;
}
```
2. 在需要显示遮罩层的组件中,使用Vue的`computed`属性计算出一个布尔值,用来判断是否需要显示遮罩层,例如:
```html
<template>
<div>
<button @click="showMask = true">显示遮罩层</button>
<div v-if="showMask" class="mask"></div>
</div>
</template>
<script>
export default {
data() {
return {
showMask: false,
};
},
computed: {
bodyStyle() {
return this.showMask ? { overflow: 'hidden' } : { overflow: 'auto' };
},
},
};
</script>
<style>
body {
height: 100%;
}
</style>
```
3. 在组件的`<body>`元素上绑定样式,根据是否显示遮罩层来决定是否隐藏滚动条,例如:
```html
<template>
<div>
<button @click="showMask = true">显示遮罩层</button>
<div v-if="showMask" class="mask"></div>
</div>
</template>
<script>
export default {
data() {
return {
showMask: false,
};
},
computed: {
bodyStyle() {
return this.showMask ? { overflow: 'hidden' } : { overflow: 'auto' };
},
},
mounted() {
Object.assign(document.body.style, this.bodyStyle);
},
updated() {
Object.assign(document.body.style, this.bodyStyle);
},
};
</script>
<style>
body {
height: 100%;
}
</style>
```
这样就可以在Vue3的项目中去掉遮罩层下方的滚动条了。
微信小程序禁止滚动条
可以通过在页面的 `onLoad` 函数中设置 `disableScroll` 属性来禁止滚动条。具体代码如下:
```javascript
Page({
onLoad: function () {
wx.setNavigationBarTitle({
title: '页面标题'
})
wx.showNavigationBarLoading()
this.setData({
disableScroll: true
})
}
})
```