如何将2 jScrollPane添加到我的页面,每个都有不同的CSS？

要将2个JScrollPane添加到页面，并为每个JScrollPane应用不同的CSS样式，可以按照以下步骤进行操作：

首先，确保你已经引入了所需的jQuery和jScrollPane库文件。可以通过以下方式在页面中引入它们：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jScrollPane/2.4.2/script/jquery.jscrollpane.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jScrollPane/2.4.2/style/jquery.jscrollpane.min.css">

在页面中创建两个容器元素，用于包裹每个JScrollPane。例如，可以使用两个div元素：

<div id="scrollPane1" class="custom-scroll-pane"></div>
<div id="scrollPane2" class="custom-scroll-pane"></div>

在CSS样式表中定义两个不同的样式类，用于分别应用于每个JScrollPane的容器元素。例如：

.custom-scroll-pane {
  width: 300px;
  height: 200px;
  overflow: auto;
  /* 添加其他自定义样式 */
}

.custom-scroll-pane#scrollPane1 {
  /* 添加第一个JScrollPane的特定样式 */
}

.custom-scroll-pane#scrollPane2 {
  /* 添加第二个JScrollPane的特定样式 */
}

在页面的JavaScript部分，使用jQuery选择器选中每个容器元素，并将其转换为JScrollPane。然后，根据需要应用不同的CSS类。例如：

$(document).ready(function() {
  // 将第一个容器元素转换为JScrollPane，并应用特定的CSS类
  $('#scrollPane1').jScrollPane({
    // 添加其他自定义选项
  }).addClass('custom-scroll-pane#scrollPane1');

  // 将第二个容器元素转换为JScrollPane，并应用特定的CSS类
  $('#scrollPane2').jScrollPane({
    // 添加其他自定义选项
  }).addClass('custom-scroll-pane#scrollPane2');
});

通过以上步骤，你可以将两个JScrollPane添加到页面，并为每个JScrollPane应用不同的CSS样式。记得根据实际需求修改CSS样式和其他自定义选项。