项目常用功能模块(4)-angular 鼠标移到某一元素上,滚动条左右移动

来源:互联网 发布:青少年普法网络大赛 编辑:程序博客网 时间:2024/05/22 10:23

项目中,鼠标移到某一元素上,滚动条左右移动,案例中是在bootstrap-table上,结合jquery.mousewheel.js,但思路相通。

module.exports = /*@ngInject*/ function(Restangular,$rootScope) {'use strict';return {link: function(scope, elem, attrs, ctrl) {//控制表格左右滚动elem.bind('mousewheel', function(event, delta) {        var step=30;        var dir = delta > 0 ? 'Up' : 'Down';//判断上下滚动        var left=$(".fixed-table-body").scrollLeft();//获取当前滚动条左右进度$(this).css('cursor','move');        if(dir=='Up'){          left-=step;        }else if(dir=='Down'){          left+=step;        }        $(".fixed-table-body").scrollLeft(left);    });    //禁用外部区域鼠标滚动    var scrollTop = -1; // 鼠标进入到区域后,则存储当前window滚动条的高度 elem.hover(function(){ scrollTop = $(window).scrollTop(); }, function(){ scrollTop = -1; }); // 鼠标进入到区域后,则强制window滚动条的高度 $(window).scroll(function(){ scrollTop!==-1 && $(this).scrollTop(scrollTop);})}}}