Firefox Android 上的 scrollLeft 计算错误答案

【问题标题】：scrollLeft wrong calculation on Firefox AndroidFirefox Android 上的 scrollLeft 计算错误
【发布时间】：2015-03-07 13:34:31
【问题描述】：

它的工作原理

我为一个项目创建了一个可缩放的 div。滚动条的位置是 jQuery 计算的宽度。在桌面环境中有一个可见的滑块。在移动设备上没有，但仍然可以向左滑动以获取更多内容。

（它还没有在调整窗口大小时更新。需要重新加载。）

预期：“overflow_diff”应该等于“Scoll pos”。 “百分比”应该是 100 到最后。

什么有效

它在桌面版 Chrome 和 Firefox 以及 Android 版 Chrome 中运行良好。

什么不起作用 - 我的问题

Android 上的 Firefox 的计算完全错误。奇怪的是它可以在桌面上运行。如果是 Firefox 中的错误，我该如何解决？

完整示例

http://xn--trnell-wxa.se/scrolltest2/index.php

HTML 标头

<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

CSS

* {
        padding: 0;
        margin: 0;
    }
    .wrap {
        padding: 40px;
        background: #eee;
        width: 75%;
    }
    .cropped {
        overflow-x: auto;
    }
    .overflow {
        width: 300%;
        background: #ddd;
        height: 100px;
    }

jQuery(window).ready(function($) {
        var cropped_width = $('.cropped').width();
        var overflow_width = $('.overflow').width();
        var overflow_diff = overflow_width - cropped_width;

        $( '.log' ).append( 'Overflow: ' + overflow_width + '<br>' );
        $( '.log' ).append( 'Cropped: ' + cropped_width + '<br>' );
        $( '.log' ).append( 'Overflow diff: ' + overflow_diff + '<br>' );
        $( '.log' ).append( '<div class="scrolled"></div>' );
        $( '.log' ).append( '<div class="scrolled2"></div>' );

        $( '.cropped' ).on('scroll touchmove', function() {
            var scroll_pos = $( this ).scrollLeft();
            var percentage = Math.round( scroll_pos / overflow_diff * 100 );

            $( '.log .scrolled' ).html( 'Scroll pos: ' + scroll_pos + '<br>Percentage: ' + percentage + '<br>' );
        });
    });

HTML

<div class="wrap">
    <div class="cropped">
        <div class="overflow">Swipe to the end</div>
    </div>
</div>
<div class="log"></div>

【问题讨论】：

我怀疑它的数学运算不正确，这意味着 $( this ).scrollLeft() 是错误的，或者宽度已经改变，overflow_diff 现在是错误的。如果您在事件处理程序中重新计算overflow_diff，然后记录这两个值会发生什么？

标签： android jquery firefox mobile scrollbar

【解决方案1】：

我认为您应该将您的事件与.on() 绑定并使用touchmove 事件：

$( '.cropped' ).on('scroll touchmove', function() {
    // the code here
});

【讨论】：

也许吧。但是它并没有改变Android上的Firefox计算错误的问题。还是谢谢！

【解决方案2】：

来自@Joeytje50 回复Android browsers not handling touchmove events correctly

原来这里的问题只是事件处理程序的事实里面没有 event.preventDefault() ，所以原来的动作仍然执行，这显然中断了触摸事件。修理这个，只需在当前事件处理程序中添加 e.preventDefault() 取消当前事件并使其按预期工作的函数 Chrome 和 Opera 也是如此。

另外，要检查您使用的是scroll 还是touchmove，您可以使用以下条件，

// ..... your remaining code
$( '.log' ).append( '<div class="scrolled2"></div>' );

var eventName='scroll';
if ('ontouchstart' in document.documentElement) {
    eventName = 'touchmove';
}
$( '.cropped' ).on(eventName , function(e) {
    (eventName == 'touchmove') ? e.preventDefault() : '';
    var scroll_pos = $( this ).scrollLeft();
    // your remaining code
});

【讨论】：