overflow-y: hidden 隐藏了上下滚动条以后鼠标滚球无法滚动？

Posted 2023-04-22

overflow-y: hidden 隐藏了上下滚动条以后鼠标滚球无法滚动。我隐藏上下的滚动条，但是放了这个代码却无法鼠标上的滚珠上下滚动了。怎么处理* overflow-y: hidden;

是的，当使用 CSS 属性 overflow-y: hidden; 来隐藏元素的上下滚动条时，将会禁用鼠标滚轮滚动功能。
这是因为滚动条被隐藏后，浏览器无法检测到用户的滚轮事件，因此无法触发滚动操作。如果你需要隐藏滚动条但仍需要支持滚动操作，你可以尝试使用 javascript 或其他库来模拟滚动条或使用自定义的滚动条。
下面是一个例子，使用 JavaScript 实现一个自定义滚动条来隐藏原生的滚动条：
html：
<div class="scroll-container">
<div class="scroll-content">
<!-- content here -->
</div></div>
css：
.scroll-container overflow-y: hidden; position: relative;
.scroll-content height: 100%; overflow-y: scroll;
/* Custom scrollbar styles */.scroll-container::-webkit-scrollbar width: 6px;
.scroll-container::-webkit-scrollbar-track background-color: #F5F5F5;
.scroll-container::-webkit-scrollbar-thumb background-color: #000000; border-radius: 10px;

javascriptCopy code// 使用 JavaScript 模拟自定义滚动条const container = document.querySelector('.scroll-container');const content = document.querySelector('.scroll-content');const scrollbar = document.createElement('div');
scrollbar.classList.add('scrollbar');const thumb = document.createElement('div');
thumb.classList.add('thumb');

scrollbar.appendChild(thumb);
container.appendChild(scrollbar);// 更新自定义滚动条的高度function updateScrollbar() const contentHeight = content.scrollHeight; const containerHeight = container.offsetHeight; const scrollbarHeight = containerHeight / contentHeight * containerHeight;
thumb.style.height = scrollbarHeight + 'px';
// 监听内容变化并更新自定义滚动条高度content.addEventListener('DOMSubtreeModified', updateScrollbar);// 监听滚动事件并更新自定义滚动条位置content.addEventListener('scroll', () => const contentHeight = content.scrollHeight; const containerHeight = container.offsetHeight; const scrollTop = content.scrollTop; const scrollbarHeight = containerHeight / contentHeight * containerHeight; const thumbTop = scrollTop / contentHeight * containerHeight;

thumb.style.top = thumbTop + 'px';
);// 初始化自定义滚动条updateScrollbar();

上面的代码演示了如何使用 JavaScript 来模拟自定义滚动条。你可以根据你的需求来自定义样式和滚动条功能 参考技术A 当你将 overflow-y: hidden; 应用于整个页面时，会阻止页面垂直滚动，包括使用鼠标滚轮。如果你只想隐藏某个元素的滚动条而不阻止滚动，可以使用 overflow: hidden;，这将同时隐藏水平和垂直滚动条，并且你仍然可以使用鼠标滚轮来滚动该元素。如果你需要同时保留元素的滚动功能和隐藏滚动条，则可以使用自定义滚动条来实现。 参考技术B 当你使用 overflow-y: hidden; 属性时，它会隐藏元素的垂直滚动条，这意味着如果你想要滚动这个元素，你需要使用其他的方法，如使用鼠标滚轮或者通过 JavaScript 实现自定义滚动条。
如果你想在隐藏垂直滚动条的同时允许用户使用鼠标滚轮滚动元素，你可以尝试使用 JavaScript 代码来实现自定义滚动条，或者使用下面的 CSS 属性：
-ms-overflow-style: none; /* IE 和 Edge */
scrollbar-width: none; /* Firefox */
::-webkit-scrollbar /* Chrome、Safari 和 Opera */
display: none;

这些属性会将浏览器的滚动条完全隐藏，并且可以让用户通过鼠标滚轮来滚动元素。但是请注意，自定义滚动条可能会对用户体验产生一定的影响，因此请根据实际情况选择合适的方案。

ExtJs Panel 滚动条设置

设置autoscroll:true同时出现横向和纵向滚动条。

不要设置autoscroll属性，或者autoscroll:false，然后设置bodyStyle : \'overflow-x:hidden; overflow-y:scroll\'。

 

bodyStyle :\'overflow-x:hidden;overflow-y:scroll\', //隐藏水平滚动条,显示用overflow-x:visible

 

overflow-x属性	解释
hidden	隐藏
scroll	一定有
auto	自动

 

 

 

 

 

 

借鉴地址：http://www.cnblogs.com/exmyth/archive/2013/04/15/3021861.html