Two days ago, I needed to set the style of the scroll bar. At first, I thought that I could just use CSS to set it. Well, I still thought it was very simple. Although I can set the scroll bar style in CSS, it only works on Firefox and IE browsers. It can't be used, so you can only use the js plugin to set the properties of the scroll bar. Check mCustomScrollbar from the Internet . Now let me introduce to you how to use this plugin. In fact, two days ago, I found that there are also scroll bar settings in swiper. If you are interested, you can take a look.
Official website address: http://manos.malihu.gr/jquery-custom-content-scroller/
References: https://www.cnblogs.com/alantao/p/5239262.html
Instructions:
The files that need to be imported:
jquery.mCustomScrollbar.js
jquery.mousewheel.min.js
jquery.mCustomScrollbar.css
These three files must be imported, because this plugin is based on jQuery, so the order of js introduction also needs to be paid attention to:
First import the style file:
<link href="jquery.mCustomScrollbar.css"rel="stylesheet" type="text/css">
Next, to introduce js files, you need to introduce 4 js files, pay attention to the order of introduction
<script src="jquery.min.js"></script> <script src="jqueryUI.min.js"></script> <script src="mCustomScrollbar.js"></script> <script src="jquery.mousewheel.min.js"></script>
Instructions
$(function(){ $(selecter).mCustomScrollbar(); })
Introduction to common parameters
setWidth: false // Set the width value of your content can be pixel value or percentage (string), the value is 300, "30%" setHeight: false // Set the height value of your content can be pixel value or percentage (string), The value is 300, "30%" setTop: 0 // Set the vertical scrolling position at the beginning, the value is "100px", the value is a string setLeft: 0 // Set the horizontal scrolling position at the beginning, the value is "100px", The value is a string axis: "string" // "x", "y", the value is a string, corresponding to the horizontal and vertical scrolling scrollInertia: Integer // The inertia value of scrolling can be no scroll inertia by using 0 in milliseconds (scroll inertia Can make block scrolling smoother) scrollbarPosition: "string" //The value is "inside", "outside", the value is a string, the parent element must be positioned relative, and the scroll bar is inside or outside the element; autoDraggerLength:Boolean: // Automatically adjust the scrolling according to the content area The length value of the drag bar: true, false alwaysShowScrollbar: Integer // Keep the scroll bar displayed, the value is 0, 1 (keep the scroll bar visible), 2 (keep the scroll bar all displayed) mouseWheel:{ enable: boolean // Enable or disable scrolling content via mouse wheel. scrollAmount: Integer // The pixel of the scroll wheel invert: boolean // Invert the scroll direction } scrollButtons:{ enable:Boolean } // Whether to add the support value of the buttons at both ends of the scroll bar: true,false scrollButtons:{ scrollType:String } // The scroll button scroll type value: "continuous" (when you click the scroll control button, it scrolls intermittently ) "pixels" (scroll according to the number of pixels per click) Click here to see an example of the image scrollButtons:{ scrollSpeed:Integer } // Set the scroll speed when the scroll button is clicked (default 20) Set a higher value Can scroll faster scrollButtons:{ scrollAmount:Integer } // Set the numerical pixel unit of each scroll when the scroll button is clicked. The default is 40 pixels advanced:{ updateOnBrowserResize:Boolean } // Adjust the scroll bar on the browser for the adaptive layout according to the percentage size value: true, false set false if your content block has been fixed size advanced: { updateOnContentResize:Boolean } //Automatically adjust the size of the scroll bar according to the content of the dynamic transformation: true, false Set to true will continuously check the length of the content and change the size of the scroll bar accordingly. It is recommended not to set it to true unless necessary if there are many scroll bars on the page It may generate an extra move out. You can use the update method to replace this function advanced:{ autoExpandHorizontalScroll:Boolean } // Automatically expand the length of the horizontal scroll bar: true, false Set true you can automatically adjust the size according to the dynamic change of the content You can see Demo advanced:{ autoScrollOnFocus:Boolean } // Whether to automatically scroll to the focused object, for example, the form uses the TAB key to jump to the focus value: true false callbacks:{ onScrollStart: function (){} } // Use custom The callback function is executed when the scrolling time starts Call this custom callback function when scrolling to the bottom Demo Same as above callbacks:{ onTotalScrollBack: function (){} } // This custom callback function is called when scrolling to the top Demo Same as above callbacks:{ onTotalScrollOffset:Integer } // Set the offset pixel unit to the top or bottom callbacks:{ whileScrolling: function (){} } // Execute this custom callback function when the user is scrolling callbacks:{ whileScrollingInterval:Integer } // Set the time interval in milliseconds for calling the whileScrolling callback function
example
$('.search-result').mCustomScrollbar("scrollTo","p.load-box:last",{
scrollButtons:{
enable:false,
scrollType:"continuous",
mouseWheel:true,
scrollInertia:10000
},
advanced:{
updateOnBrowserResize:true,
updateOnContentResize:false,
autoExpandHorizontalScroll:false,
autoScrollOnFocus:true
},
horizontalScroll:false,
callbacks:{
onScroll:function(){}
},
whileScrolling:function(){}
}
});