Question

预期如何运作

我为一个项目创建了一个可分解的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;
    }

JS

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>

Answer 1

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

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

Answer 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
});

在Firefox Android上scrollLeft错误计算

2 个答案: