帶有圓角的 div 中的滾動條

Question

我有一個帶圓角的<div> 。 我實際上將它用作下拉菜單的下拉列表部分。 不可避免地，每隔一段時間它就會包含大量信息，因此它只需要一個滾動條。 但是，當滾動條顯示時，它會刪除那一側的圓角，這是非常不受歡迎的。 這是jsFiddle 。

 #test { background: red; max-width: 200px; max-height: 200px; border-radius: 10px; overflow-y: scroll; }

 <div id="test"> Text <br /> Text <br /> Text <br /> Text <br /> Text <br /> Text <br /> Text <br /> Text <br /> Text <br /> Text <br /> Text <br /> Text <br /> Text <br /> Text <br /> Text <br /> </div>

我嘗試使用自定義解決方案，如我喜歡的 jQuery 的 mCustomScrollBar，但它對圓角的作用完全相同。 有關如何解決此問題的任何解決方法或提示？

Answer 1

您可以使用 jQuery 插件jScrollPane ，並根據需要自定義顏色、寬度等。

請參閱以下 OS X 樣式滾動條示例。 並在此處查看動態寬度。

js小提琴

 $(function() { $('.scroll-pretty').jScrollPane({ verticalGutter: 2 }); });

 .scroll-pretty { background: grey; border-radius: 5px; width: 300px; height: 150px; overflow: auto; outline: 0; } .scroll-pretty .jspVerticalBar { background: transparent; width: 10px; } .scroll-pretty .jspTrack { background: transparent; width: 8px; } .scroll-pretty .jspCap { background: transparent; display: block; height: 2px; /*same as verticalGutter value*/ } .scroll-pretty .jspDrag { background: silver; border-radius: 10px; } .scroll-pretty p { margin: 10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jScrollPane/2.0.23/script/jquery.jscrollpane.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jScrollPane/2.0.23/style/jquery.jscrollpane.min.css"> <div class="scroll-pretty"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus eu lacus semper viverra. </p> </div>