jquery - 使用 mCustomScrollbar 一次滚动一个元素

Question

如何使用 mCustomScrollbar 确保在滚动元素上一次一个元素。我有以下html：

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>

在滚动时，一次ul只能li滚动一个，即没有元素应该跳过滚动。

Answer 1

您应该在对象中使用scrollAmount属性。mouseWheel

mouseWheel:{ scrollAmount: integer }

设置鼠标滚轮滚动量（以像素为单位）。默认值“auto”根据可滚动内容长度调整滚动量。

$("ul").mCustomScrollbar({
  mouseWheel:{ 
    scrollAmount: 100
  }
});

ul {height: 200px}
li {
  height: 100px;
  border: 1px solid red;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<link rel="stylesheet" href="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css" />
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
</ul>