nicescroll – 小鱼塘

一，基本使用教程

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.js"></script>

        <style>

            #bar{
                border: 1px solid #fff;
                margin-bottom: 10px;
            }

            #bar > button {
                margin-left: 10px;
            }

            #test_div{
                height: 200px;
                background-color: azure;
                overflow-y: auto;
            }

            #test_div>div{
                height: 100px;
                text-align: center;
                line-height: 100px;
            }

            #test_div>div:nth-child(1){
                background-color: aqua;
            }

            #test_div>div:nth-child(2){
                background-color: red;
            }

            #test_div>div:nth-child(3){
                background-color: yellow;
            }
        </style>

        <script>
            $(document).ready(function(){
                var nice = $('#test_div').niceScroll({autohidemode: false})

                console.log("what")
                console.log($("button"))

                //滚动顶部
                $("button").eq(0).on("click", ()=>{
                    console.log(nice)
                    nice.setScrollTop(0)
                })

                //滚动底部
                $("button").eq(1).on("click", ()=>{
              
                    //200 - 133 = 67
                    var view = nice.view
                    var h = nice.getContentSize().h
                    var view_max = h - view.h //得到最大滚动内容 == page.maxh 但动态加载元素
                    //不准确，所以自己计算得到准确
                    nice.setScrollTop(view_max)

                    var top = nice.getScrollTop()
                    console.log("top:" + top)
                    console.log(nice)
                })

                //打印nicescroll 几个属性
                $("button").eq(2).on("click", ()=>{
                    var max_scroll = nice.scrollvaluemax
                    console.log("最大滚动[滑梯-滑块]:" + max_scroll)
                    var view = nice.view
                    console.log("被安装滚动的div[这里是test_div]:" + JSON.stringify(view))

                    var top = nice.getScrollTop()
                    console.log("内容具体顶部:" + top)

                    var page = nice.page
                    console.log("page[代表当前内容大小]:" + JSON.stringify(page))
                    


                    var clientSize = nice.getContentSize()
                    console.log("top + view.h:" + top + "+" + view.h  + "=")
                    console.log("screenTop + view.height == 滚动的过显示的内容高度")
                    console.log("conentSize == scrollHeight == 等于div真正内容大小，非显示的，只能显示200，但真正有3个DIV，所以300" )
                    console.log("max_scroll_height = ScrollHeight - view.h:" + (clientSize.h - view.h) + "=" + page.maxh)


                    console.log(nice)
                })
            })


        </script>
    </head>

    <body>
        <div id="bar">
            <button>
                滚动顶部
            </button>
            <button>
                滚动到底部
            </button>
            <button>
                打印基本数据[F12]
            </button>
        </div>
        <div id="test_div">
            <div>
                div1
            </div>
            <div>
                div2
            </div>
            <div>
                div3
            </div>
        </div>
    </body>
</html>
滚动到底部可以通过
getScrollTop() + view.h == getContentSize().h 判断是否滚到底了
标签： nicescroll

nicescroll使用教程

一，基本使用教程
