jQuery的scrollLeft以及scrollTop方法滑动的方法解析

在vue的项目中，不习惯去引入一个jQuery的库
看了Jquery的滑动源码解析，其实可以直接用原生方法去操作dom滑动

jQuery.each( { scrollLeft: "pageXOffset", scrollTop: "pageYOffset" }, function( method, prop ) {
    var top = "pageYOffset" === prop;

    jQuery.fn[ method ] = function( val ) {
        //access内部会调用method(elem[0],val)
        return access( this, function( elem, method, val ) {
            var win = getWindow( elem );//是不是window
            if ( val === undefined ) {//如果val为undefined
                //如果win存在，返回window[prop] prop是对象的键值
                //如果不存在，返回elem[method] method是对象的键名
                return win ? win[ prop ] : elem[ method ];//window.pageXOffset 或者 elem.scrollLeft
            }
            //下面是设置值
            if ( win ) {//$(window) $(document)
                win.scrollTo(
                    !top ? val : window.pageXOffset,
                    top ? val : window.pageYOffset
                );

            } else {
                elem[ method ] = val;
            }
        }, method, val, arguments.length, null );
    };
});

其实这段源码最重要的就是

win.scrollTo(
    !top ? val : window.pageXOffset,
    top ? val : window.pageYOffset
);

scrollTo是直接可以使用的

scrollTo(xpos,ypos)

参数	描述
xpos	必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos	必需。要在窗口文档显示区左上角显示的文档的 y 坐标。

这时候 直接操作document.querySelector(’.tabbox’).scrollTo(scrollWidth, 0) 就可以不用引入jQuery