鍦℉5涓娇鐢╩customscrollbar姝ラ濡備笅锛?/p>

1. 棣栧厛锛屼笅杞藉苟寮曞叆mCustomScrollbar鎻掍欢鐨勬枃浠躲€傚彲浠ヤ粠瀹樻柟缃戠珯涓嬭浇鏈€鏂扮増鏈殑鎻掍欢鏂囦欢锛岀劧鍚庡皢js鏂囦欢鍜宑ss鏂囦欢娣诲姞鍒颁綘鐨勯」鐩腑銆?/p>

2. 鍦℉TML鏂囦欢涓紝鍒涘缓涓€涓叿鏈夊浐瀹氶珮搴︾殑瀹瑰櫒鍏冪礌锛岀敤浜庡寘瑁归渶瑕佹坊鍔犺嚜瀹氫箟婊氬姩鏉＄殑鍐呭銆?/p>

3. 鍦–SS鏂囦欢涓紝涓哄鍣ㄥ厓绱犳坊鍔犳牱寮忔潵璁剧疆鍏堕珮搴﹀拰瀹藉害锛屽苟闅愯棌榛樿鐨勬祻瑙堝櫒婊氬姩鏉°€?/p>

4. 鍦↗avaScript鏂囦欢涓紝浣跨敤jQuery閫夋嫨鍣ㄩ€変腑瀹瑰櫒鍏冪礌锛屽苟璋冪敤mCustomScrollbar鏂规硶鏉ュ簲鐢ㄨ嚜瀹氫箟婊氬姩鏉°€?/p>

涓嬮潰鏄竴涓ず渚嬩唬鐮侊細

HTML:

<div class="scroll-container">
  <!-- 闇€瑕佹坊鍔犺嚜瀹氫箟婊氬姩鏉＄殑鍐呭 -->
</div>

CSS:

.scroll-container {
  height: 400px;
  overflow: auto;
}

JavaScript:

$(document).ready(function() {
  $(".scroll-container").mCustomScrollbar();
});

閫氳繃浠ヤ笂姝ラ锛屼綘灏卞彲浠ュ湪H5涓娇鐢╩CustomScrollbar鎻掍欢鏉ユ坊鍔犺嚜瀹氫箟婊氬姩鏉′簡銆備綘鍙互鏍规嵁鎻掍欢鐨勬枃妗ｈ繘涓€姝ヨ嚜瀹氫箟婊氬姩鏉＄殑鏍峰紡鍜岃涓恒€?/p>