jquery.nicescroll.min.js使用

最新推荐文章于 2024-08-16 08:54:53 发布

yven_style

最新推荐文章于 2024-08-16 08:54:53 发布

阅读量1.5k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/yangwen123222/article/details/78533156

版权

JavaScript 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <script src="js/jquery-1.9.1.min.js"></script>
        <script src="js/jquery.nicescroll.min.js"></script>
    </head>
    <body>
		<div>
        <div id="div1" style="float:left;height:600px;overflow:auto;">
            <h1>这里是滚动条插件niceScroll的测试页面</h1>
            <h2>这里是滚动条插件niceScroll的测试页面</h2>
            <h3>这里是滚动条插件niceScroll的测试页面</h3>
            <h4>这里是滚动条插件niceScroll的测试页面</h4>
            <h5>这里是滚动条插件niceScroll的测试页面</h5>
            <h6>这里是滚动条插件niceScroll的测试页面</h6>
            <p>这里是滚动条插件niceScroll的测试页面</p>
            <span>这里是滚动条插件niceScroll的测试页面</span>
            <h1>下面是带有滚动条的子div</h1>
            <div  id="div2" style="width:350px;height:200px;overflow:auto;border:1px solid red;">
			<div id="sub">
                <h1>我是带有滚动条的子div</h1>
                <h2>我是带有滚动条的子div</h2>
                <h3>我是带有滚动条的子div</h3>
                <h4>我是带有滚动条的子div</h4>
                <h5>我是带有滚动条的子div</h5>
                <h6>我是带有滚动条的子div</h6>
            </div>
			</div>
            <h1>这里是滚动条插件niceScroll的测试页面</h1>
            <h2>这里是滚动条插件niceScroll的测试页面</h2>
            <h3>这里是滚动条插件niceScroll的测试页面</h3>
            <h4>这里是滚动条插件niceScroll的测试页面</h4>
            <h5>这里是滚动条插件niceScroll的测试页面</h5>
            <h6>这里是滚动条插件niceScroll的测试页面</h6>
        </div>
		<div id="div3" style="float:right;height:200px">
		<h1>这里是滚动条插件niceScroll的测试页面</h1>
            <h2>这里是滚动条插件niceScroll的测试页面</h2>
            <h3>这里是滚动条插件niceScroll的测试页面</h3>
            <h4>这里是滚动条插件niceScroll的测试页面</h4>
            <h5>这里是滚动条插件niceScroll的测试页面</h5>
            <h6>这里是滚动条插件niceScroll的测试页面</h6>
            <p>这里是滚动条插件niceScroll的测试页面</p>
            <span>这里是滚动条插件niceScroll的测试页面</span>
		</div>
		</div>
    </body>
    <script type"text-javascript">
        $(function(){
            $("#div1").niceScroll({
                cursorborder:"",
                cursorcolor:"#00F",
                boxzoom:false,
                autohidemode: false
            });
            $("#div2").niceScroll("#sub",{
                cursorborder:"",
                cursorcolor:"#00F",
                boxzoom:false,
                autohidemode: false
            });
			$("#div3").niceScroll({
                cursorborder:"",
                cursorcolor:"#00F",
                boxzoom:false,
                autohidemode: false
            });
        });
    </script>
</html>

注意：jquery的版本不能太低