删除 HTML 滚动条但允许鼠标滚轮滚动

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3253199/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 03:47:28  来源:igfitidea点击:

Remove HTML scrollbars but allow mousewheel scrolling

htmlscrollmousewheel

提问by Sameer

Possible Duplicate:
How to disable browser or element scrollbar, but allow scrolling with wheel or arrow keys?

可能的重复:
如何禁用浏览器或元素滚动条,但允许使用滚轮或箭头键滚动?

I was able to disable vertical scrollbars in a grid by setting the CSS property overflow-y: hidden. However, this removed the ability to scroll the contents with the mouse wheel as well.

我可以通过设置 CSS 属性来禁用网格中的垂直滚动条overflow-y: hidden。但是,这也取消了使用鼠标滚轮滚动内容的能力。

Is there a way to not show the scrollbars but still allow the contents to be scrolled through mouse wheel or arrow keys?

有没有办法不显示滚动条但仍然允许通过鼠标滚轮或箭头键滚动内容?

回答by SamGoody

There are Javascript methods, see the thread you duplicated.

有 Javascript 方法,请参阅您复制的线程。

A better solution is to set the target div to overflow:scroll, and wrap it inside a second element that is 8px narrower, who's overflow:hidden.

更好的解决方案是将目标 div 设置为 overflow:scroll,并将其包裹在第二个窄 8px 的元素中,即 overflow:hidden。

The target element will have a hidden scrollbar. The mousewheel will work, but the scroll bar will not show.

目标元素将有一个隐藏的滚动条。鼠标滚轮将起作用,但不会显示滚动条。

<div style='overflow:hidden; width:200px;'>
   <div style='overflow:scroll; width:208px'>
      My mousewheel scrollable content here....
   </div>
</div>

Note that 8px as the width of the scrollbar is a random number - it's probably a lot more, and it could require per browser CSS.

请注意,作为滚动条宽度的 8px 是一个随机数 - 它可能更多,并且可能需要每个浏览器的 CSS。

Still better than JS in my book.

在我的书中仍然比 JS 好。

回答by vitch

You could use jScrollPanewhich allows you to replace the browser scrollbars with custom ones:

您可以使用jScrollPane,它允许您用自定义滚动条替换浏览器滚动条:

Since you can style these custom scrollbars with CSS you could easily make them disappear (try something like: .jScrollPaneTrack { display: none; })

既然你可以风格的CSS这些自定义滚动,你可以很容易地使它们消失(你可以试试:.jScrollPaneTrack { display: none; }