Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
97 views
in Technique[技术] by (71.8m points)

javascript - conflicting value for pageY on Ipad

I am testing a page on an IPad (IOS 14.3) in portrait mode . (see code below)

I am outputting the touched Y-value of the screen. When I tap the screen near the top the output is near 0 (depending on the thickness of finger). When I tap the screen near the bottom the output is near 1000.

However when I swipe vertically from the top to bottom the values start from 0 but when I reach the bottom with my finger it stops near 600.

The same issue in the other directory, when I start at the bottom is shows a value around 1000 and when it reaches the top is stops around 300.

It almost seems there are missing 300px in each (vertical) direction.

Note: the X-value (horizontal swipes) is accurate, hence I've excluded it in this example. Also on Android the output from the console.log seems fine.

    <!doctype html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0, user-scalable=yes">

    <style>
        body,
        html {
            position: fixed;
            width: 100%;
            height: 100%;
            margin: 0;
            padding 0;
            background-color: #AAAAAA;
        }
    </style>
</head>

<body>
<div style='text-align:center;font-size:25px;width:100px;border:1px solid blue;margin:auto' id='feedback'>Hello</div>
</body>

</html>

<script>

    var func = function (e) {
        var evt = (typeof e.originalEvent === 'undefined') ? e : e.originalEvent;
        var touch = evt.touches[0] || evt.changedTouches[0];
        document.getElementById('feedback').textContent = 'top:'+touch.pageY;
    };

    document.body.addEventListener('touchstart', func);
    document.body.addEventListener('touchmove', func);
    document.body.addEventListener('touchend', func);

</script>

What is the reason the with swipping vertically I am getting different results than when I touch the screen?

question from:https://stackoverflow.com/questions/65903149/conflicting-value-for-pagey-on-ipad

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

It was solved by changing

document.getElementById('feedback').textContent = 'top:'+touch.pageY;

into

document.getElementById('feedback').textContent = 'top:'+touch.clientY;

Although I don't quite see why these would differ in this case.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...