使用 mCustomScrollbar 一次滚动一个元素

Posted 2023-05-09

【中文标题】使用 mCustomScrollbar 一次滚动一个元素

【英文标题】：scroll one element at a time using mCustomScrollbar

【发布时间】：2019-04-26 13:35:14

【问题描述】：

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

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

在滚动ul 时，一次只能滚动一个li，即任何元素都不应跳过滚动。

【问题讨论】：

你的意思是在鼠标滚轮上li滚动？

是的，一次一里

【参考方案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>