pointer-events页面无法滑动

可以使用CSS3属性pointer-events来解决页面无法滑动的问题。当元素的pointer-events属性值为none时，该元素将不会成为鼠标事件的target，从而可以避免底部fixed的图片挡住整个body的滑动区域，实现整个页面都可以滑动。但是需要注意的是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。

以下是一个使用pointer-events属性解决页面无法滑动问题的例子：

body {
  pointer-events: none;
}

.fixed-image {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  pointer-events: auto;
}

在上面的例子中，我们将body元素的pointer-events属性值设置为none，这样可以避免底部fixed的图片挡住整个body的滑动区域。同时，我们将底部fixed的图片的pointer-events属性值设置为auto，这样可以使该元素成为鼠标事件的target，从而可以响应用户的操作。

相关问题

关闭el-scrollbar的滑动并用新scrollbar

如果你想要关闭默认的Element UI（如Vue）中的滚动条，并自定义一个新的滚动条，可以按照以下步骤操作：

1. 首先，在CSS中禁用Element UI提供的`el-scrollbar`样式。你可以通过覆盖`.el-scrollbar`、`.el-scrollbar__view`等类来隐藏滚动条。例如：

.el-scrollbar {
  display: none; /* 或设置 opacity: 0; 和 pointer-events: none; 来达到类似效果 */
}

/* 如果你想自定义滚动条样式，可以用一个自定义的div替换，例如 */
.custom-scrollbar {
  position: relative;
}

2. 然后，创建一个新的滚动条组件，可以使用一些现成的库，比如`vue-custom-scrollbar`，或者自己编写一个简单的滚动条组件。这个组件应该包含滚动条轨道和滚动块。

3. 将自定义滚动条组件添加到需要滚动的元素上，替代默认的滚动功能。在HTML中：

<div class="custom-scrollbar" ref="customScrollbar">
  <div :style="{ WebkitTransform: 'translateY(' + scrollbar.y + '%)' }">
    <!-- 内容区域 -->
  </div>
</div>

4. 在Vue实例中，获取到滚动条组件，并处理滚动事件：

export default {
  mounted() {
    this.$refs.customScrollbar.addEventListener('scroll', (e) => {
      // 更新内容区的滚动位置
      this.scrollbar.y = e.target.scrollTop;
    });
  }
};

设置mui-slider 不允许左右触摸滑动滑动

可以通过设置 `mui-slider-handle` 元素的 CSS 样式，禁用左右划动事件。具体实现方式如下：

.mui-slider-handle {
  pointer-events: none;
}

这会将 `mui-slider-handle` 元素的所有事件都禁用掉，包括左右滑动事件。这样，用户就无法通过左右滑动来改变滑块的位置了。