使用mcustomscrollbar一次滚​​动一个元素

Question

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

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

滚动ul时一次只能滚动一个li，即没有元素可以跳过滚动。

Answer 1

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

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>