漂亮的卷轴不工作<p>标签

Question

不错的滚动功能不适用于 p 标签。 请看我下面的代码片段

 $(".newsDesc").niceScroll();

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <p class="newsDesc text-justify"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam lorem ipsum lorem particular? </p>

我包括这个文件：

<script src="assets/js/nicescroll.js"></script> 

如果我在任何 div 上放置漂亮的滚动条，它就可以正常工作，但在

标记它不起作用？ 任何的想法？ 提前致谢

Answer 1

您必须设置高度并使用 for p 标签。 $(document).ready(function() { var nc = $(".newsDesc").niceScroll();}); <style>.newsDesc {width : 100px;height : 200px;border : 1px solid red; cursor:default;}</style>

Answer 2

niceScroll不支持<p>标签。 然而DIV，I帧，textarea和文档页面（体）滚动条支持。

从文档和使用这个例子： niceScroll需要一个容器和一个包装器div 来指定滚动的边界。 您还需要在初始化niceScroll()函数时指定目标包装器。

您还缺少示例中的一些css类，请参阅下面的代码段：

 $(".newsDesc").niceScroll("div.nice-wrapper", { cursorwidth: "12px" });

 .newsDesc { overflow: auto; height: 280px; } .nice-wrapper {} .nicescroll-rails { background-color: white;; } .nicescroll-cursors { border: none !important; background-color: purple !important; border-radius: 0 !important; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container newsDesc"> <div class="nice-wrapper"> <h2> paragraph 1</h2> <p class="text-justify"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam lorem ipsum lorem particular? </p> <h2> paragraph 2</h2> <p class="text-justify"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam lorem ipsum lorem particular? </p> <h2> paragraph 3</h2> <p class="text-justify"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam lorem ipsum lorem particular? </p> </div> </div>

Answer 3

 $(function() { $("body").niceScroll({ cursorborder: "1px solid aquamarine", cursorwidth: "8px" }); });

 body{ text-align: justify; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <p class="newsDesc text-justify" style="text-align: justify;"> <h1>content</h1>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam lorem ipsum lorem particular? <h1>content</h1> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam lorem ipsum lorem particular? <h1>content</h1> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam lorem ipsum lorem particular? </p>