在iOS

问题描述

这是我对堆栈溢出的第一个问题。我已经开始学习有关大流行的Web开发，并决定从头开始构建我的公司网站并部署到Netlify。雄心勃勃，我已经几次陷入困境，但到目前为止，除了以下内容之外，我仍然能够弄清楚事情：

我在视口的右侧有一个推子（像在混合板上一样），用作自定义滚动条。无论是在拖动页面还是在滚动页面时，它都可以工作，从而相应地更改推子的位置和滚动位置。但是，在尝试使其适用于移动设备时，我得到了这种特有的行为，该行为似乎特定于iOS，而在Android上则不是问题。当我单击并拖动它时，随着touchmove事件触发，它似乎跳回到其初始位置，从而导致一些非常难看的跳跃。我尝试使用preventDefault，添加一个布尔值标志以在导致冲突的情况下停用mousedown和mousemove事件，尝试添加requestAnimationFrame以使其更有效（这似乎工作不正常-我的帧速率仍在单击并拖动推子时，其速度要比正常滚动页面时低得多），但没有任何效果。我曾尝试研究iOS如何处理触摸事件，以找出导致此行为的原因以及如何防止此行为，但是找不到相当合适的资源。

可以在here上找到我一直在进行的git分支的部署。

可以在here中找到该仓库。

注意：在iPhone上，仅当vw大于685px时，推子滚动条才会以横向模式显示。此外，桌面显示器和iPad Pro等大型平板电脑的布局也大不相同，并且很大程度上依赖于基于滚动的效果。

这是适用于推子的javascript；有一块代码用于鼠标事件，另一块代码用于触摸事件。触摸事件是我主要关心的问题。鼠标事件代码的唯一问题是我上面提到的帧速率低。

var enabled = 'yes';
var faderPath = document.getElementById('scrolltrack');
var fader = document.getElementById('scrollthumb');
let touch = false;

//click and drag
fader.addEventListener('mousedown',pickup,false);
function pickup(event) {
    if (touch == false){
        enabled = 'no';
        let startPos = event.clientY;
        let faderStart = fader.offsetTop;
        let bottomEdge = faderPath.offsetHeight - fader.offsetHeight;

        let needRAF = null;
        function moveAt(event) {
            if (needRAF){
                needRAF = null;
                cancelAnimationFrame(setNew);
            }
            needRAF = requestAnimationFrame(setNew);
            function setNew(){
                let dragdist = event.clientY - startPos;
                let newTop = faderStart + dragdist;        
                //restrains fader in track
                if(newTop<0){
                    newTop=0;
                } else if(newTop>bottomEdge){
                    newTop = bottomEdge;
                }

                //sets new position
                fader.style.top = `${newTop}px`;
                //convert position to percentage
                var newTopPer = (newTop / bottomEdge);
                //make page scroll with fader position
                var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
                var scrollPos = newTopPer*height;
                document.documentElement.scrollTop = scrollPos;
            }
        }
        document.addEventListener('mousemove',moveAt,false);
        document.addEventListener('mouseup',dropIt,false);

        function dropIt() {
            document.removeEventListener('mousemove',false);
            fader.onmouseup = null;
            enabled = 'yes';
        }
    }
}

fader.addEventListener('touchstart',touchPickup,false);
function touchPickup(event) {
    event.preventDefault();
    enabled = 'no';
    touch = true;
    let startPos = event.targettouches[0].clientY;
    let faderStart = fader.offsetTop;
    //declare bottomEdge here to prevent recalculating with each drag move
    let bottomEdge = faderPath.offsetHeight - fader.offsetHeight;

    let needRAF = null;
    function moveAt(touchEvent) {
        touchEvent.preventDefault();
        if (needRAF) {
            needRAF = null;
            cancelAnimationFrame(setNew);
        }
        needRAF = requestAnimationFrame(setNew);
        function setNew() {
            let dragdist = touchEvent.targettouches[0].clientY - startPos; 
            let newTop = faderStart + dragdist;
                
            //restrains fader in track
            if(newTop<0){
                newTop=0;
            } else if(newTop>bottomEdge){
                newTop = bottomEdge;
            }
            fader.style.top = `${newTop}px`;
            //convert position to percentage
            var newTopPer = (newTop / bottomEdge);
            //make page scroll with fader position
            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            var scrollPos = newTopPer*height;
            document.documentElement.scrollTop = scrollPos;
        }
        
        
        
    }
    document.addEventListener('touchmove',false);
    document.addEventListener('touchend',false);
    document.addEventListener('touchcancel',function(e){e.preventDefault()},false);

    function dropIt() {
        document.removeEventListener('touchmove',false);
        fader.ontouchend = null;
        enabled = 'yes';
        touch = false;
    }
}

fader.ondragstart = function() {
    return false;
}

//make fader move with window scrolling
window.addEventListener('scroll',scrollLink,false);
function scrollLink(){
    if(enabled == 'yes') {
        var scrollPos = document.documentElement.scrollTop;
        var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
        var scrolled = ((scrollPos/height)*100)/1.13;
        fader.style.top = scrolled + "%";
    }
}

希望我的代码不太过分，让您无法理解。我试图使其井井有条，可读性强。任何见解和建议都非常感谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）