分享一则JavaScript滚动条插件源码

2020-05-23 06:21:34易采站长站整理

        /// </summary>
        /// <returns type=”linkFlyScroll” />
        /*
        * linkFlyScroll包含的属性主要在本函数中初始化或重新定义:
        * isDrag:是否正在拖拽滚动条
        * startTop:(工作中)滚动条开始滚动位置
        * endTop:(工作中)滚动条结束滚动位置
        * topLimit:滚动条顶部极限位置
        * bottomLimit:滚动条底部极限位置
        * context:内容Dom
        * scrollRadix:滚动基数
        * target:容器Dom
        */
        //重置或读取一系列数据
        var currScroll = this;
        currScroll.isDrag = false,
        currScroll.startTop = 0,
        currScroll.endTop = (currScroll.scrollUl.style.top ? parseInt(currScroll.scrollUl.style.top) : 0),
        currScroll.topLimit = currScroll.target.scrollTop,
        currScroll.bottomLimit = currScroll.target.clientHeight,
        currScroll.scrollRadix = 10;
        //得出滚动条的高度:内容高度*(容器高度/内容高度=容器占内容百分比)
        var scrollPx = currScroll.target.clientHeight * (currScroll.target.clientHeight / currScroll.context.offsetHeight);
        //滚动条高度
        currScroll.scrollUl.childNodes[1].style.height = scrollPx + ‘px’;
        if (currScroll.context.clientHeight <= currScroll.target.clientHeight && currScroll.options.auto) {
            currScroll.scrollUl.style.display = ‘none’;
        } else {
            currScroll.scrollUl.style.display = ‘block’;
            //当滚动条显示,修正最大位置数据
            currScroll.bottomLimit -= currScroll.scrollUl.offsetHeight;
        }