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

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

Answer 2

<p>代码为not supported in niceScroll。但是，支持div，iframe，textarea和文档页面（正文）滚动条。

从documentation并使用this示例：niceScroll需要容器和包装 div才能< em>指定滚动的界限。初始化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>

好的滚动无效<p>标记

3 个答案: