解决双滚动条

滚动条"/>

解决双滚动条

前言：

最近在公司做项目遇到了一个看起来很简单，但是就是改了很久都无法改掉的小bug，双滚动条。我试过很多种方式，但是每一种都没办法解决我的问题。

方式一

平常用的最多的方式。

html,body {overflow: hidden; // 都隐藏overflow-x: hidden; // 隐藏横向overflow-y: hidden; // 隐藏纵向
}

方式二

这种方式将滚动事件锁定在content类上，滚动事件不会冒泡到任何可能具有滚动属性的父元素，然后再将父元素滚动条隐藏。（就这都没能解决我的问题）

html,body {overflow-y: auto;
}
body::-webkit-scrollbar {display: none;
}
.content {height: 100%;display: flex;overscroll-behavior: none;
}

方式三

使用js方式禁用外层滚动条，并且隐藏外层滚动条。这样外层滚动条及看不见也无法滚动。

doucument.querySelector('body').addEventListener('DOMMouseScroll mousewheel',
function () {e.preventDefault()// 阻止默认时间e.stopPropagation()// 阻止冒泡return false
}, { passive: false }) // 

但是以上三种方式并没有解决我遇到的问题，我经过几天排查发现是公司写的单选框组件导致了出现双滚动条，将其删除或者是使用原生的单选框就能够避免这个问题。

总结

经过几天的挣扎这个问题勉强的到了解决，希望以上三种方式能够帮你解决双滚动条的问题，ok，本篇博客就先更新到这里。（近期有点忙，突然发现有这么久没更新了）。