javascript - 使用 JQuery 样式化嵌套滚动条

Question

我想使用 jquery 插件或 JS 库来设置这两个滚动条的样式。

这是 HTML 代码:

<div id="container">
  <div class="fixedHeightContainer">
      <div class="fixedHeightContent">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut mi nunc, sit amet fermentum nisi. Nulla vitae felis eros. Pellentesque viverra arcu ac metus lacinia a tincidunt quam sodales. Vestibulum ac velit at nulla tincidunt semper non et orci. Cras a erat eros. Vestibulum vitae felis nulla, at vehicula augue. Nulla eu tellus quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin massa augue, fringilla sit amet scelerisque quis, sagittis id erat. Praesent semper nulla quis neque blandit at sagittis felis luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel nisl erat. Phasellus vitae libero erat. Aenean tortor ligula, porta sit amet mattis a, sagittis vel turpis.
      </div>
      Phasellus in aliquet quam. Nullam vitae aliquet metus. Praesent libero mi, gravida eu iaculis non, bibendum molestie neque. Integer hendrerit nulla quis arcu bibendum posuere. Pellentesque aliquet nisl quis magna rhoncus eget laoreet dui vehicula. Etiam dapibus dui id lectus gravida vestibulum porttitor dolor ornare. Maecenas vitae risus quis nisl cursus lobortis. Proin accumsan adipiscing varius.
    </div>
</div>

CSS 代码:

.fixedHeightContainer {
  height: 250px;
  width:250px; 
}

.fixedHeightContent {
  height:250px;
   overflow:auto;
}

#container {
    width:300px;
    height: 300px;
    overflow: auto;
}

此示例中描述了这种情况:http://jsfiddle.net/AWtnd/ .

我已经尝试过这两种解决方案，但都没有成功:

1. 使用这个名为 “JQuery 自定义内容滚动器” 的 JQuery 插件:http://manos.malihu.gr/jquery-custom-content-scroller/但不支持嵌套滚动条。
2. 使用 jscrollpane 但我无法设置“仅垂直滚动条”。

解决这个问题的最佳方案是什么？谢谢。

Answer 1

试试这个:jQuery custom scrollbar , 它工作得很好。