我们如何为< div>创建样式化的滚动条.鼠标滚轮敏感 [英] How do we make a styled scroll bar for a <div> with mouse wheel sensitive

问题描述

我需要在页面上创建一个具有自己的滚动条的区域，就像下图中的Facebook Messenger一样.

I need to create an area of the page that has it's own scroll bar, just like the Facebook messenger in the image below.

堆栈溢出的答案与大代码段具有相同的系统，但是滚动条没有设置样式.

Stack overflow has the same system at the answers with large pieces of code, but that scroll bar is not styled.

注意图片，您将在Messenger DIV中看到普通的滚动条和样式化的滚动条.有人知道怎么做吗?

Note at the picture and you will see the normal scroll bar and the styled scroll bar in the Messenger DIV. Anyone knows how to do it?

推荐答案

我想自定义滚动条是在 javascript 中实现的，它看起来非常漂亮，并且您不能使浏览器的滚动条看起来那么好！

I imagine that custom scrollbar is implemented in javascript, it looks very slick and you can't make a browsers scrollbar look that good!

找到一个示例，我为您整理了以下网址: http://jsfiddle .net/9LHPW/2/-注意检查资源选项卡，因为它包含四个外部文件(3个Js和1个CSS)

Find an example I just put together for you at: http://jsfiddle.net/9LHPW/2/ - note check the resources tab as this includes four external files (3x Js and 1x CSS)

请访问此网站，以获取使用Javascript和jQuery的另一个示例(看起来完全像您想要的内容):

Have a look at this website for a further example (looks like exactly what you want) with Javascript and jQuery: http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

您可以在 http://manos.malihu.gr/jquery中找到该插件的主页. -custom-content-scroller

附带使用方法部分！

这篇关于我们如何为< div>创建样式化的滚动条.鼠标滚轮敏感的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！