-2

不错的滚动功能不适用于 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 上放置漂亮的滚动条，它可以正常工作，但在

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

4

3 回答 3

0

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

于 2017-10-10T09:03:36.170 回答
0 

$(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>

于 2017-10-10T12:21:37.970 回答
0

<p>不支持niceScroll标签。但是，支持 div、Iframe、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>

于 2017-10-10T09:19:54.303 回答