h5 ios scroll 冲突 scroll.js

转载

jimoshalengzhou 2024-08-12 21:17:19

文章标签 h5 ios scroll 冲突 javascript jquery web前端 css 文章分类 iOS 移动开发

Scroll.js，用于实现鼠标点击滚动条滚动、鼠标拖动滚动、鼠标点击上下按钮滚动

/* 
* @Author: Marte
* @Date:   2017-05-03 21:19:44
* @Last Modified by:   Marte
* @Last Modified time: 2017-05-13 23:20:49
*/

/* 点击滚动 */
/* 通过各自能移动的距离比例，算出各自每次移动的距离 */
/* 设定spd参数可以调整快慢，原理是设定每次移动距离（相对） */
/* 传入参数为task_list的id，和每次滚动的相对距离 */
function scroll_click(task_list,spd){

    //ul能移动的高度
    var $ulMH = $(task_list+' ul').height()-$(task_list).height();
    //如果li很少不需要滚动，阻止事件
    if($ulMH <= 0) return false;

    //滚动按钮btn能移动的高度
    var $scrollbtnMH = $(task_list+' .scroll_bar').height()-20-$(task_list+' .scroll_btn').height();


    //根据比例算出每次，ul和btn能移动的距离
    var $ulSpeed = spd*($ulMH/($scrollbtnMH+$ulMH));

    var $scrollSpeed =spd*($scrollbtnMH/($scrollbtnMH+$ulMH));

    //btn位置的上下限
    var $uplimit = 10;
    var $lowlimit = $scrollbtnMH+10;


    //上滚按钮
    $(task_list+' .scroll_down').click(function(event) {
        //获取btn初始位置
        var $offsetTB = parseInt($(task_list+' .scroll_btn').css('top'));

        if(!($(task_list+' ul').is(":animated"))){//等待动画完成
            //判断若在边界，设定好位置
            if(parseInt(parseInt($(this).css('top'))) >= $scrollbtnMH+10){
                $(this).css('top',$(this).parent(task_list+" .scroll_bar").height()-10-$(this).height()+"px");
                $(task_list+" ul").css('bottom',$ulMH+'px');
            }
            if($offsetTB < $lowlimit){
                if($offsetTB+$scrollSpeed >= $lowlimit){//下一次运动接近最底端，直接到最底端
                    $(task_list+' ul').animate({bottom: $ulMH+'px'},500);
                    $(task_list+' .scroll_btn').animate({top: $lowlimit+"px"},500);
                }
                else{
                    $(task_list+' ul').animate({bottom: '+='+$ulSpeed+'px'},500);
                    $(task_list+' .scroll_btn').animate({top:"+="+$scrollSpeed+"px"},500);
                }
            }
        }
    });
    //下滚按钮
    $(task_list+' .scroll_up').click(function(event) {
        //获取btn高度
        var $offsetTB = parseInt($(task_list+' .scroll_btn').css('top'));

        if(!($(task_list+' ul').is(":animated"))){
            if($offsetTB > $uplimit){
                if($offsetTB-$scrollSpeed <= 10){//下一次运动接近最顶端，直接到最顶端
                    $(task_list+' ul').animate({bottom: "0px"},500);
                    $(task_list+' .scroll_btn').animate({top: $uplimit+"px"},500);
                }
                else{
                    $(task_list+' ul').animate({bottom: "-="+$ulSpeed+"px"},500);
                    $(task_list+' .scroll_btn').animate({top:"-="+$scrollSpeed+"px"},500);
                }
            }
        }
    });
}

/* 拖动滚动 */
/* 通过鼠标移动距离，直接设定btn的位置（初始距离+移动距离） */
/* 然后根据比例算出内容要上下移动的距离 */
/* 传入参数为task_list的id */
function scroll_move(task_list){


    //ul能移动的高度
    var $ulMH = $(task_list+' ul').height()-$(task_list).height();
    //如果li很少不需要滚动，阻止事件
    if($ulMH <= 0) return false;

    //滚动按钮btn能移动的高度
    var $scrollbtnMH = $(task_list+' .scroll_bar').height()-20-$(task_list+' .scroll_btn').height();

    var mousePosY;//记录鼠标的坐标
    var initPosY;//记录每次点击btn后，btn的初始位置
    var initUlY;//记录每次点击btn后，ul的初始位置
    var isMouseDown;//记录鼠标是否按下

    $(task_list+' .scroll_btn').mousedown(function(event) {
        //捕获初始鼠标位置、btn位置
        isMouseDown = true;

        mousePosY = event.pageY;
        initPosY = parseInt($(this).css("top"));
        initUlY = parseInt($(task_list+" ul").css('bottom'));

        /*判断若接近边界，设定好位置，阻止事件*/
        /*提前阻止事件，防止越界*/
        if(parseInt($(this).css('top')) < 12){
            $(this).css('top',"10px");
            $(task_list+" ul").css('bottom','0px');
            return false;
        }
        else if(parseInt($(this).css('top')) > $scrollbtnMH+8){
            $(this).css('top',$(this).parent(task_list+" .scroll_bar").height()-10-$(this).height()+"px");
            $(task_list+" ul").css('bottom',$ulMH+'px');
            return false;
        }
    }).mousemove(function(event) {
        var moveY = parseInt(event.pageY-mousePosY);//btn移动的距离
        var tempY = moveY+initPosY;//btn当前的位置
        var moveUlY = parseInt(($ulMH/$scrollbtnMH)*moveY);//按比例算好要ul移动的距离

        if(isMouseDown){//鼠标按下

            /*判断若在边界，设定好位置，阻止事件*/
            if(tempY <= 10 || initUlY+moveUlY<=0){
                $(this).css('top',"10px");
                $(task_list+" ul").css('bottom','0px');
                return false;
            }
            else if(tempY >$scrollbtnMH+10){
                $(this).css('top',$(this).parent(task_list+" .scroll_bar").height()-10-$(this).height()+"px");
                $(task_list+" ul").css('bottom',$ulMH+'px');
                return false;
            }

            else{
                $(this).css('top', tempY+'px');
                $(task_list+" ul").css('bottom',initUlY+moveUlY+'px');
            }
        }
    }).mouseup(function(event) {
        isMouseDown = false;
        /*判断若在边界，设定好位置*/

        if(parseInt($(this).css('top')) < 10){
            $(this).css('top',"10px");
            $(task_list+" ul").css('bottom','0px');
        }
        else if(parseInt($(this).css('top')) > $scrollbtnMH+10){
            $(this).css('top',$(this).parent(task_list+" .scroll_bar").height()-10-$(this).height()+"px");
            $(task_list+" ul").css('bottom',$ulMH+'px');
        }
    }).mouseleave(function(event) {
        isMouseDown = false;
        /*判断若在边界，设定好位置*/
        if(parseInt($(this).css('top')) < 10){
            $(this).css('top',"10px");
            $(task_list+" ul").css('bottom','0px');
        }
        else if(parseInt($(this).css('top')) > $scrollbtnMH+10){
            $(this).css('top',$(this).parent(task_list+" .scroll_bar").height()-10-$(this).height()+"px");
            $(task_list+" ul").css('bottom',$ulMH+'px');
        }
    }).mouseenter(function(event) {//解决ie下需要点击一次后才能拖动的Bug
        $(this).trigger('mousedown');
    });
}

/* 点击滚动条的位置滚动 */
function scroll_clickBar(task_list){

    //ul能移动的高度
    var $ulMH = $(task_list+' ul').height()-$(task_list).height();

    //如果li很少不需要滚动，阻止事件
    if($ulMH <= 0) return false;

    //滚动按钮btn能移动的高度
    var $scrollbtnMH = $(task_list+' .scroll_bar').height()-20-$(task_list+' .scroll_btn').height();


    var mousePosY;//记录点击时鼠标的坐标
    var initPosY;//记录每次点击btn前，btn的初始位置
    var initUlY;//记录每次点击btn前，ul的初始位置
    var barTop=$(task_list+' .scroll_bar').offset().top+10;

    $(task_list+' .scroll_bar').mouseenter(function(event) {
        initPosY = parseInt($(task_list+' .scroll_btn').position().top);
        initUlY = parseInt($(task_list+' ul').css('bottom'));
    }).click(function(event) {
        mousePosY = parseInt(event.pageY-barTop);//鼠标相对高度

        if(mousePosY<=0){//鼠标位置在上边界
            $(task_list+' .scroll_btn').animate({top: '10px'}, 500);
            $(task_list+' ul').animate({bottom: '0px'},500);
        }
        else if(mousePosY >= $scrollbtnMH+10){//在下边界
            $(task_list+' .scroll_btn').animate({top: $scrollbtnMH+10+'px'}, 500);
            $(task_list+' ul').animate({bottom: $ulMH+'px'},500);
        }
        else{
            var moveY = mousePosY-initPosY;//btn要移动的距离
            var tempY = moveY+initPosY;//btn要移动的位置

            var moveUlY = parseInt(($ulMH/$scrollbtnMH)*moveY);//按比例算好要ul移动的距离

            $(task_list+' .scroll_btn').animate({top: tempY+'px'}, 500);
            $(task_list+' ul').animate({bottom:initUlY+moveUlY+'px'},500);
        }
    });
}

Scroll_mouse.js，用于实现滚轮滚动

/* 利用js的事件监听实现滚轮滚动 */
/* 除此之外和点击滚动差不多 */
function scroll_mouse(task_list,task_list2,spd){

    //ul能移动的高度
    var $ulMH = $(task_list+' ul').height()-$(task_list).height();
    //如果li很少不需要滚动，阻止事件
    if($ulMH <= 0) return false;

    //滚动按钮btn能移动的高度
    var $scrollbtnMH = $(task_list+' .scroll_bar').height()-20-$(task_list+' .scroll_btn').height();


    //根据比例算出每次，ul和btn能移动的距离
    var $ulSpeed = spd*($ulMH/($scrollbtnMH+$ulMH));

    var $scrollSpeed =spd*($scrollbtnMH/($scrollbtnMH+$ulMH));

    //btn位置的上下限
    var $uplimit = 10;
    var $lowlimit = $scrollbtnMH+10;

    var scrollDir;//记录滚轮方向，下滚-1，上滚1

    var MouseWheelHandler = function(e) {
          e.preventDefault();
          e = window.event || e;
          if(e.wheelDelta){//判断浏览器IE，谷歌滑轮事件 
            scrollDir = e.wheelDelta>0? 1:-1;
          }
          else if(e.detail){//判断浏览器firefox滑轮事件，上下滚反过来了 
            scrollDir = e.detail>0? -1:1;
          }

        if(scrollDir == -1){//下滚
            var $offsetTB = parseInt($(task_list+' .scroll_btn').css('top'));

            if(!($(task_list+' ul').is(":animated"))){//等待动画完成
                if($offsetTB < $lowlimit){
                    if($offsetTB+$scrollSpeed >= $lowlimit){//下一次运动接近最底端，直接到最底端
                        $(task_list+' ul').animate({bottom: $ulMH+'px'},500);
                        $(task_list+' .scroll_btn').animate({top: $lowlimit+"px"},500);
                    }
                    else{
                        $(task_list+' ul').animate({bottom: '+='+$ulSpeed+'px'},500);
                        $(task_list+' .scroll_btn').animate({top:"+="+$scrollSpeed+"px"},500);
                    }
                }
            }
        }
        else{//上滚
            var $offsetTB = parseInt($(task_list+' .scroll_btn').css('top'));

            if(!($(task_list+' ul').is(":animated"))){//等待动画完成
                if($offsetTB > $uplimit){
                    if($offsetTB-$scrollSpeed <= 10){
                        $(task_list+' ul').animate({bottom: '0px'},500);
                        $(task_list+' .scroll_btn').animate({top: $uplimit+"px"},500);
                    }
                    else{
                        $(task_list+' ul').animate({bottom: '-='+$ulSpeed+'px'},500);
                        $(task_list+' .scroll_btn').animate({top:"-="+$scrollSpeed+"px"},500);
                    }
                }
            }
        }   
    }
    var addMouseWheelHandler = function() {
        var oUl = document.getElementById(task_list2);
        //这是js的事件监听方法，jquery没有
        //IE9, Chrome, Safari, Oper
        oUl.addEventListener("mousewheel", MouseWheelHandler, false); 
        //firefox
        oUl.addEventListener("DOMMouseScroll", MouseWheelHandler, false); 
    }
    addMouseWheelHandler();
}

后记：似乎存在，如果页面ul动态变化，ul的高度始终只读取一次的问题。把变量弄成那个js文件的全局可以解决

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。