草庐IT

javascript - 如何检测浏览器的哪一侧是滚动条 - 右侧或左侧(在 RTL 的情况下)？

coder 2023-07-06 原文

对于 <html dir="rtl">一些浏览器(Safari、Edge、IE)会自动将滚动条移动到左侧，这是正确的行为:

不幸的是，主要浏览器(Chrome 和 Firefox)的行为方式不同，滚动条仍然位于浏览器的右侧。

是否可以通过编程方式(最好使用 vanilla JS)检测滚动条在哪一侧？

UPD(2018 年 9 月 28 日):到目前为止，答案中没有有效的解决方案，人们正在尝试使用 getBoundingClientRect().left 来检测滚动条的位置。或 .offsetLeft并且不会起作用，因为它永远是0至少在 Edge 中独立于滚动条位置。

UPD (15.10.2018):TLDR:没有办法。

浏览器似乎没有提供检测滚动条的API。在下面的答案中有插入虚拟 div 的技巧。并计算滚动条在该 div 中的位置。我不能将这些技巧视为答案，因为文档滚动条可以通过多种方式定位( <html dir="rtl"> 、操作系统的 RTL 版本、浏览器设置等)

最佳答案

如图所示here , 滚动条不会改变 dir="rtl" on html 或 body Firefox 中的 HTML 标签、Chrome、Opera 和 Safari。它适用于 IE 和 Edge。我试过(在 Edge 17、IE 11、Firefox 62、Chrome 69、Opera 56、Safari 5.1 上)，它在 2018 年 10 月仍然相关(如果 dir="rtl" 9.1 在左侧显示滚动条).

直到现在我还没有找到任何跨浏览器的本地解决方案来找到滚动条的位置，正如您所要求的。我不认为你有一个。只能想办法找“hack”来修复了……

根据您的问题/评论和您的实际问题 here ，我认为关注 dir="rtl" 的兼容性会更好。您正在尝试找出滚动条的位置，因为它最初没有按预期工作。为了让它按预期工作，一个快速的修复方法是将滚动条放在 body 元素上:

<!DOCTYPE html>
<html dir="rtl">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      html, body {
        height: 100%;
        overflow: hidden;
      }

      body {
        padding: 0;
        margin: 0;
        overflow-y: auto; /* or overflow: auto; */
      }

      p {
        margin: 0;
        font-size: 8em;
      }
    </style>
  </head>

  <body>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  </body>
</html>

此 css 代码将使 body 元素而不是 html 元素滚动。奇怪的是，将滚动条放在 body 上会在正确的位置显示滚动条。它适用于最新版本的浏览器。

确切的兼容性是(测试的最旧的工作版本):

  • IE => v6 - 2001
  • 边缘=>全部
  • Firefox => v4 - 2011
  • Opera => v10 - 2009
  • Chrome => v19 - 2012
  • Safari => v10.1 - 2016

对于兼容的浏览器，您可以“信任”基于 dir 属性的滚动条位置。这意味着对于上面列出的浏览器，dir="rtl" 的滚动条将位于左侧，dir="ltr" 的滚动条将位于右侧。我测试过并且有效。

对于旧的浏览器版本，我暂时没有修复。这意味着您不会完全兼容，但如您所见，这主要是 sa​​fari 的问题。

编辑:研究找到滚动条的位置

正如我上面提到的，我认为我们可以尝试找到一个“hack”来找到滚动条的位置。我不是 CSS 专家，所以我的解决方案不是很漂亮。具有 CSS 技能的人可能会找到一个好的解决方案。

如果滚动条在主体上(上面的解决方案)，我们可以使用 css 定位元素检测滚动条位置。例如这段代码:

<!DOCTYPE html>
<html dir="rtl">
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    html, body {
      height: 100%;
      overflow: hidden;
    }

    body {
      padding: 0;
      margin: 0;
      overflow-y: auto;
    }

    p {
      margin: 0;
      font-size: 8em;
    }

    #sc { position: relative; float: left; }
    #sc_2 { position: relative; float: right; }
    #sc_3 { position: absolute; width: 100%; }
  </style>
</head>
<body>
  <div id="sc"></div>
  <div id="sc_2"></div>
  <div id="sc_3"></div>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  <script>
    var html = document.getElementsByTagName('html')[0];
    var sc = document.getElementById('sc');
    var sc_2 = document.getElementById('sc_2');
    var sc_3 = document.getElementById('sc_3');

    if (sc_2.offsetLeft < html.clientWidth && !(sc_3.offsetLeft < 0)) {
      console.log('bar on the right');
    } else if (sc.offsetLeft > 0 || sc_3.offsetLeft < 0) {
      console.log('bar on the left');
    } else {
      console.log('no bar');
    }
  </script>
</body>
</html>

兼容性是(测试的最旧工作版本):

  • IE => v6 - 2001
  • 边缘=>全部
  • Firefox => v4 - 2011
  • Opera => v10 - 2009
  • Chrome => v15 - 2011
  • Safari => 不工作

如果滚动在 body 标签上，这个解决方案不是很有用，因为如上所述，在这种情况下我们可以“信任” dir 属性。我把它放在这里是因为它可能适用于 html 标签上的滚动。

关于javascript - 如何检测浏览器的哪一侧是滚动条 - 右侧或左侧(在 RTL 的情况下)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52404285/

一侧javascriptcodesectionstrongscrollbararabicright-to-lefthebrew

有关javascript - 如何检测浏览器的哪一侧是滚动条 - 右侧或左侧(在 RTL 的情况下)？的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  4. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  5. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  6. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  7. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  8. ruby - 如何每月在 Heroku 运行一次 Scheduler 插件？ - 2

    在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/

  9. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

    我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为

  10. ruby - 如何使用文字标量样式在 YAML 中转储字符串？ - 2

    我有一大串格式化数据(例如JSON)，我想使用Psychinruby​​同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解

随机推荐