JQuery 滚动条不工作

Question

我正在尝试在我的一个元素的文本区域中放置一个滚动条。经过一番研究后，我决定使用 Gromo 的 jQuery 滚动条

http://gromo.github.io/jquery.scrollbar/

所以我在头上加载了所有内容(jQuery、该插件的 Js 以及演示页面上的 JavaScript)。

它不是加载滚动条，而是简单地删除任何滚动条，以包含默认滚动条。

这是我正在尝试的代码:

HTML:

<textarea class="textarea-scrollbar scrollbar-outer">
Lorem ipsum...
</textarea>

CSS:

/*************** SCROLLBAR BASE CSS ***************/

.scroll-wrapper {
    overflow: hidden !important;
    padding: 0 !important;
    position: relative;
}

.scroll-wrapper > .scroll-content {
    border: none !important;
    box-sizing: content-box !important;
    height: auto;
    left: 0;
    margin: 0;
    max-height: none;
    max-width: none !important;
    overflow: scroll !important;
    padding: 0;
    position: relative !important;
    top: 0;
    width: auto !important;
}

.scroll-wrapper > .scroll-content::-webkit-scrollbar {
    height: 0;
    width: 0;
}

.scroll-element {
    display: none;
}
.scroll-element, .scroll-element div {
    box-sizing: content-box;
}

.scroll-element.scroll-x.scroll-scrollx_visible,
.scroll-element.scroll-y.scroll-scrolly_visible {
    display: block;
}

.scroll-element .scroll-bar,
.scroll-element .scroll-arrow {
    cursor: default;
}

.scroll-textarea {
    border: 1px solid #cccccc;
    border-top-color: #999999;
}
.scroll-textarea > .scroll-content {
    overflow: hidden !important;
}
.scroll-textarea > .scroll-content > textarea {
    border: none !important;
    box-sizing: border-box;
    height: 100% !important;
    margin: 0;
    max-height: none !important;
    max-width: none !important;
    overflow: scroll !important;
    outline: none;
    padding: 2px;
    position: relative !important;
    top: 0;
    width: 100% !important;
}
.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
    height: 0;
    width: 0;
}




/*************** TEXTAREA STYLES ***************/

.textarea-scrollbar {
    height: 250px;
    width: 500px;
}

JavaScript:

jQuery 1.7.2，Gromo 的插件 js:http://gromo.github.io/jquery.scrollbar/jquery.scrollbar.js还有...

jQuery(document).ready(function(){
    jQuery('.textarea-scrollbar').scrollbar();
});

这是我的 fiddle :http://jsfiddle.net/qLobcjd0/1/

这是带有工作文本区域滚动条的演示页面:http://gromo.github.io/jquery.scrollbar/demo/basic.html

感谢您的帮助，谢谢!

Answer 1

我已经更新了您的示例:http://jsfiddle.net/qLobcjd0/3/

我已经删除了除以下内容之外的所有样式:

.textarea-scrollbar {
    height: 250px;
    width: 500px;
}

并添加了对 jquery.scrollbar.css 的引用