jjzjj

android - Firefox Android 上的 scrollLeft 错误计算

coder 2023-12-23 原文

它的预期工作方式

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

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

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

什么有效

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

什么不起作用 - 我的问题

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

完整示例

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

HTML header 

<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>

最佳答案

我认为你应该使用 .on() 绑定(bind)你的事件并使用 touchmove 事件:

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

关于android - Firefox Android 上的 scrollLeft 错误计算，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27857032/

scrollLeftandroidstrong39overflowjqueryfirefoxmobilescrollbar

有关android - Firefox Android 上的 scrollLeft 错误计算的更多相关文章

  1. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  2. ruby-on-rails - 使用一系列等级计算字母等级 - 2

    这里是Ruby新手。完成一些练习后碰壁了。练习:计算一系列成绩的字母等级创建一个方法get_grade来接受测试分数数组。数组中的每个分数应介于0和100之间，其中100是最大分数。计算平均分并将字母等级作为字符串返回，即“A”、“B”、“C”、“D”、“E”或“F”。我一直返回错误:avg.rb:1:syntaxerror,unexpectedtLBRACK,expecting')'defget_grade([100,90,80])^avg.rb:1:syntaxerror,unexpected')',expecting$end这是我目前所拥有的。我想坚持使用下面的方法或.join，

  3. ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2

    我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？ 最佳答案 试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问

  4. ruby-on-rails - openshift 上的 rails 控制台 - 2

    我将我的Rails应用程序部署到OpenShift，它运行良好，但我无法在生产服务器上运行“Rails控制台”。它给了我这个错误。我该如何解决这个问题？我尝试更新ruby​​gems，但它也给出了权限被拒绝的错误，我也无法做到。railsc错误:Warning:You'reusingRubygems1.8.24withSpring.UpgradetoatleastRubygems2.1.0andrun`gempristine--all`forbetterstartupperformance./opt/rh/ruby193/root/usr/share/rubygems/rubygems

  5. ruby-on-rails - 迷你测试错误 : "NameError: uninitialized constant" - 2

    我遵循MichaelHartl的“RubyonRails教程:学习Web开发”，并创建了检查用户名和电子邮件长度有效性的测试(名称最多50个字符，电子邮件最多255个字符)。test/helpers/application_helper_test.rb的内容是:require'test_helper'classApplicationHelperTest在运行bundleexecraketest时，所有测试都通过了，但我看到以下消息在最后被标记为错误:ERROR["test_full_title_helper",ApplicationHelperTest,1.820016791]test

  6. ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2

    我正在尝试从Postgresql表(table1)中获取数据，该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中，我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤，而不是严格相等。然而，这是行不通的:scope:my_scope,->(que

  7. ruby-on-rails - 如何在 Rails View 上显示错误消息？ - 2

    我是rails的新手，想在form字段上应用验证。myviewsnew.html.erb.....模拟.rbclassSimulation{:in=>1..25,:message=>'Therowmustbebetween1and25'}end模拟Controller.rbclassSimulationsController我想检查模型类中row字段的整数范围，如果不在范围内则返回错误信息。我可以检查上面代码的范围，但无法返回错误消息提前致谢 最佳答案 关键是您使用的是模型表单，一种显示ActiveRecord模型实例属性的表单。c

  8. 使用 ACL 调用 upload_file 时出现 Ruby S3 "Access Denied"错误 - 2

    我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常，除了该文件不是公开可用的，而且我无法获得它的公共(public)URL。但是当我登录到S3时，我可以正常查看我的文件。为了使其公开可用，我将最后一行更改为obj.upload_file(file

  9. ruby-on-rails - 错误 : Error installing pg: ERROR: Failed to build gem native extension - 2

    我克隆了一个rails仓库，我现在正尝试捆绑安装背景:OSXElCapitanruby2.2.3p173(2015-08-18修订版51636)[x86_64-darwin15]rails-v在您的Gemfile中列出的或native可用的任何gem源中找不到gem'pg(>=0)ruby​​'。运行bundleinstall以安装缺少的gem。bundleinstallFetchinggemmetadatafromhttps://rubygems.org/............Fetchingversionmetadatafromhttps://rubygems.org/...Fe

  10. ruby - ＃之间？ Cooper 的 *Beginning Ruby* 中的错误或异常 - 2

    在Cooper的书BeginningRuby中，第166页有一个我无法重现的示例。classSongincludeComparableattr_accessor:lengthdef(other)@lengthother.lengthenddefinitialize(song_name,length)@song_name=song_name@length=lengthendenda=Song.new('Rockaroundtheclock',143)b=Song.new('BohemianRhapsody',544)c=Song.new('MinuteWaltz',60)a.betwee

随机推荐