scroll one element at a time using mCustomScrollbar

Question

How to make sure that on scrolling elements one element at a time using mCustomScrollbar. I have following html:

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

On scrolling ul only one li should scroll at a time i.e no element should skip scrolling.

Answer 1

You should use scrollAmount property in mouseWheel object.

mouseWheel:{ scrollAmount: integer }

Set the mouse-wheel scrolling amount (in pixels). The default value "auto" adjusts scrolling amount according to scrollable content length.

$("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>