在允许页面滚动的时候不改变页面布局，并且不显示浏览器默认的滚动条

Question

一开始在mouted()禁用滚动条，在鼠标滚动的时候，监听鼠标滚动事件,在created()实现，就可以滚动滚动条，当鼠标不再滚动，就将滚动条禁止掉

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

要实现在允许页面滚动的时候不改变页面布局，并且不显示浏览器默认的滚动条，你可以使用CSS来隐藏滚动条，并通过JavaScript来控制滚动行为。以下是一个可能的解决方案：

CSS

首先，使用CSS来隐藏滚动条。这可以通过设置滚动容器的overflow属性为hidden来实现，同时使用position: fixed或position: absolute来固定滚动容器的位置，防止滚动时布局变化。

/* 隐藏滚动条 */
.scroll-container {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

JavaScript

然后，使用JavaScript来监听滚动事件，并在滚动时动态调整滚动容器的overflow属性。

// 滚动容器的引用
const scrollContainer = document.querySelector('.scroll-container');

// 监听滚动事件
document.addEventListener('wheel', function(event) {
  // 检查是否在滚动容器内滚动
  if (event.target === scrollContainer || scrollContainer.contains(event.target)) {
    // 允许滚动
    scrollContainer.style.overflow = 'auto';
    event.preventDefault(); // 阻止默认滚动行为
  }
});

// 监听滚动结束
document.addEventListener('wheelend', function(event) {
  if (event.target === scrollContainer || scrollContainer.contains(event.target)) {
    // 隐藏滚动条
    scrollContainer.style.overflow = 'hidden';
  }
});

请注意，wheelend事件并不是所有浏览器都支持，你可能需要使用wheel事件的passive选项来实现类似的效果。

Vue组件示例

如果你在使用Vue，你可以将上述逻辑封装到Vue组件中：

export default {
  name: 'ScrollContainer',
  mounted() {
    this.handleScroll();
  },
  methods: {
    handleScroll() {
      const scrollContainer = this.$el;

      scrollContainer.addEventListener('wheel', this.onScroll);
      scrollContainer.addEventListener('wheelend', this.onScrollEnd);
    },
    onScroll(event) {
      scrollContainer.style.overflow = 'auto';
      event.preventDefault();
    },
    onScrollEnd() {
      scrollContainer.style.overflow = 'hidden';
    }
  },
  beforeDestroy() {
    const scrollContainer = this.$el;
    scrollContainer.removeEventListener('wheel', this.onScroll);
    scrollContainer.removeEventListener('wheelend', this.onScrollEnd);
  }
}

参考资料

• MDN Web Docs - CSS Overflow
• MDN Web Docs - EventTarget.addEventListener()
• CSS-Tricks - Custom Scrollbars

这个解决方案提供了一个基本的框架，你可以根据具体需求进行调整。记得在实际项目中测试并根据需要优化代码。