怎么用原生JS控制滚动条居中并隐藏滚动条

JavaScript019

怎么用原生JS控制滚动条居中并隐藏滚动条,第1张

目前本方法只在webkit内核浏览器中有效(Chrome,Safari)。可以用JS做渐变的隐藏滚动条特效，依旧可以滚动。你可以在JS里面写判定当用户鼠标不动一定时间然后消失。

我对JS不是特别了解(只能看懂和修改JS代码的程度的能力，但是无论任何JS代码都敢修改的程度)，这效果能做出来的，我就不贴具体代码了。

不需要嵌套，纯原生。将来浏览器会支持这个效果的。

使用js获取的相关方法

//回到页面顶部

    $("#goTotop").click(function(){

        $('body,html').animate({scrollTop:0},1500) //点击按钮让其回到页面顶部

    })

     

    $(window).scroll(function() {

        var yheight1=window.pageYOffset //滚动条距顶端的距离

        var yheight=getScrollTop() //滚动条距顶端的距离

        var height =document.documentElement.clientHeight//浏览器可视化窗口的大小

        var top=parseInt(yheight)+parseInt(height)-217

        var divobj=$(".kf")

        divobj.attr('style','top:'+top+'px')

    })

     

/**

 * 获取滚动条距离顶端的距离

 * @return {}支持IE6

 */

function getScrollTop() {

        var scrollPos

        if (window.pageYOffset) {

        scrollPos = window.pageYOffset }

        else if (document.compatMode && document.compatMode != 'BackCompat')

        { scrollPos = document.documentElement.scrollTop }

        else if (document.body) { scrollPos = document.body.scrollTop } 

        return scrollPos 

}