JSFiddle - React, Tailwind, and code Playground

by wen yongheng

HTML

<link rel="stylesheet" href="https://oggpmngp5.qnssl.com/mui/v3.4.0/mui.min.css">
<script src="https://oggpmngp5.qnssl.com/mui/v3.4.0/mui.min.js"></script>


  <div id="demo" class="mui-scroll-wrapper">
    <div class="mui-scroll">
      <p style="width:200px;height:1300px;background-color:#00ff00">        
        <button id="btn" type="button">
          滚动-200px
        </button>
        <button id="btn2" type="button">
          滚动到底部
        </button>
      </p>
    </div>
  </div>

JavaScript

mui('#demo').scroll({
  deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});
document.getElementById("btn").addEventListener("tap", function() {
  mui('#demo').scroll().scrollTo(0, -200, 100); //100毫秒滚动-200px
})
document.getElementById("btn2").addEventListener("tap", function() {
  mui('#demo').scroll().scrollToBottom(100)

})