程序员经验分享-hwhale

window.pageYOffset 始终为 0，并且溢出-x: 隐藏

2024-01-11

我正在创建一个网页，其中包含一些仅需要在特定时间滑入的屏幕外内容。为了实现这一目标，我正在设置overflow-x: hidden on html, body。这样用户就无法向左或向右滚动来获取内容。

但是，在应用程序中的某个时刻，我还需要用户向下滚动的数量。据我所知window.pageYOffset是最可靠的方法之一。

但是，当我设置overflow-x rule. window.pageYOffset总是等于0.

这些事情不是应该彼此无关吗？我怎样才能解决这个问题？

我已经在 Safari、Firefox 和 Chrome 上对此进行了测试。

我试过了document.documentElement.scrollTop但这仅适用于 Firefox。

NB:

我无法用一个非常简单的例子重现这个问题。 我的应用程序的主要内容也包含在一个容器中position: absolute。如果我删除它，一切都会正常。

所以这似乎是overflow-x: hidden on body and postion: absolute on the .content体内。

然而，我无法轻易摆脱位置绝对要求，因为 不同的.content容器应能够相互叠放。

编辑2： 更奇怪的是：我有一个transform: translate(0,0) set on .content以便稍后能够转换为其他值。如果我删除它，一切都会正常！另一个看似无关的CSS 干扰的财产。


我遇到了完全相同的问题，经过长时间的搜索后解决了。

问题似乎来自于overflow-x: hidden体内。因此，为了解决这个奇怪的行为，我使用了这样的包装器：

<body>
   <div class="myWrapper">
      All your content here
   </div>
</body>

然后我将溢出属性移到了包装器的 CSS 中，而不是让它出现在 html, body 中：

html, body {
    margin:0;
    padding:0;
    height: 100%;
}
.wrapper {
    height: 100%;
    overflow-x: hidden;
}

通过这个小技巧，当我扫描现在位于包装元素中的scrollTop 属性时，结果不再是 0 而是真实值。 没有它，它就无法在 Chrome 上运行...

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

css

scroll

window.pageYOffset 始终为 0，并且溢出-x: 隐藏 的相关文章

  • 解析“流”JSON

    我在浏览器中有一个网格 我想通过 JSON 将数据行发送到网格 但浏览器应该在接收到 JSON 时不断解析它 并在解析时将行添加到网格中 换句话说 在接收到整个 JSON 对象后 不应将行全部添加到网格中 应该在接收到行时将其添加到网格中

  • jQuery AJAX 调用 Java 方法

    使用 jQuery AJAX 我们可以调用特定的 JAVA 方法 例如从 Action 类 该 Java 方法返回的数据将用于填充一些 HTML 代码 请告诉我是否可以使用 jQuery 轻松完成此操作 就像在 DWR 中一样 此外 对于

  • 使用 Angular 下载具有动态 src 的脚本

    Angular 提供了通过动态名称动态加载模板的方法ng include 该部分中的内联 JS 和 CSS 可以正常加载 但没有一个好的方法来下载带有动态 url 的脚本 我们需要下载脚本 相对于调用它们的 html 部分的路径 即我们有一

  • 在 Wordpress 站点中进行 AJAX 调用时出现问题

    我在使用 Wordpress 站点功能的 AJAX 部分时遇到了一些问题 该功能接受在表单上输入的邮政编码 使用 PHP 函数来查找邮政编码是否引用特定位置并返回到该位置的永久链接 我的第一个问题是关于我构建的表单 现在我的表单操作是空白的

  • Google App Engine：修改云运行环境

    我正在尝试部署一个使用自定义 Node js 服务器的 Next js 应用程序 我想将自定义构建变量注入应用程序 next config js const NODE ENV process env NODE ENV const envTy

  • 保持未知数量的 div 居中，每行最多 4 个

    我有一个简单的问题 但我自己无法解决 简而言之 有一个未知电话我必须在页面中放置的元素数量 最多 每行 4 个元素 但仍居中 此图片给您一个提示 我为了示例而设置它 详细 在上图中我涵盖了不同的场景 例如 如果总共有 5 个元素 则应使用第

  • 使用 KnockoutJs 映射插件进行递归模板化

    我正在尝试使用以下方法在树上进行递归模板化ko映射 插入 http knockoutjs com documentation plugins mapping html 但我无法渲染它 除非我定义separate每个级别的模板 在以下情况下

  • 跟踪用户何时点击浏览器上的后退按钮

    是否可以检测用户何时单击浏览器的后退按钮 我有一个 Ajax 应用程序 如果我可以检测到用户何时单击后退按钮 我可以显示适当的数据 任何使用 PHP JavaScript 的解决方案都是优选的 任何语言的解决方案都可以 只需要我可以翻译成

  • 表单计算器脚本基本价格未加载 OnLoad

    我的表单中有一个计算器来计算我的下拉选项选择 function select calculate on change calc input type checkbox calculate on click calc function cal

  • Laravel 中只向登录用户显示按钮

    如果我以 John 身份登录 如何才能只显示 John 的红色按钮而不显示 Susan 的红色按钮 测试系统环境 Win10 Laravel5 4 Mysql5 7 19 table class table table responsive

  • HTML 离线应用程序缓存，列出下载的文件

    作为我正在构建的离线 Web 应用程序的加载屏幕的一部分 使用缓存清单 http developer apple com library safari documentation iPhone Conceptual SafariJSData

  • 如何在没有@import的情况下减少@import？

    我用的较少 从 Google PageSpeed 我了解到 使用 importCSS 文件中的内容会影响网站速度 所以我想排除任何 import来自我的 CSS 的东西 我有 2 个不同的样式表reset css and rebuild c

  • 如何在类似控制台的环境中运行 JavaScript？

    我正在尝试遵循这里的示例 http eloquentjavascript net chapter2 html http eloquentjavascript net chapter2 html and print blah 在浏览器中运行时

  • 模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）Vue Js

    我从 GitHub 下载了一个我和我的朋友正在开发的项目 但是当我尝试运行时 npm run serve 我收到这个错误 src main js 中的错误 Module build failed from node modules babe

  • Safari 支持 JavaScript window.onerror 吗？

    我有一个附加到 window onerror 的函数 window onerror function errorMsg url line window alert asdf 这在 firefox chrome 和 IE 中工作正常 但在 s

  • 为什么元素上的负底部边距会降低该元素父元素的高度？

    这可能是由于边距折叠造成的 我知道边距折叠 至少知道它如何影响相邻元素 但我不明白当涉及负边距时它如何在嵌套元素上工作 例如 在此标记和随附的 CSS 中 Markup div class parent div class child Ch

  • 如何在 pg-promise 中设置模式

    我正在搜索的文档pg 承诺 https github com vitaly t pg promise特别是在创建客户端时 但我无法找到设置连接中使用的默认架构的选项 它始终使用public架构 我该如何设置 通常 为数据库或角色设置默认架构

  • 在 React.js 中编辑丰富的数据结构

    我正在尝试为数据结构创建一个简单的基于网格的编辑器 但我在使用 React js 时遇到了一些概念问题 他们的文档对此没有太大帮助 所以我希望这里有人可以提供帮助 首先 将状态从外部组件传输到内部组件的正确方法是什么 是否有可能将内部组件中

  • 使用 Ajax 请求作为源数据的 Jquery 自动完成搜索

    我想做的事 我想使用 jquery 自动完成函数创建一个输入文本字段 该函数从跨域curl 请求获取源数据 结果应该与此示例完全相同 CSS 在这里并不重要 http abload de img jquerydblf5 png http a

  • CSS 是否有不等于选择器？

    CSS中有类似 不等于 的东西吗 例如 我有以下代码 input 但对于某些输入 我需要将其作废 我想通过将类 reset 添加到输入标签来做到这一点 例如

随机推荐

  • 为什么解释器模式很糟糕？

    In Steve Yegge 对设计模式的评论 http steve yegge googlepages com ten great books 他将解释器模式称为 笑话 他继续谈论编译器的看法如何改变 但解释语言仍然如何继续 尽管我看不出

  • 正则表达式中的捕获组[重复]

    这个问题在这里已经有答案了 我正在探索在正则表达式中捕获组 但我对缺乏相关文档感到困惑 例如 谁能告诉我两个正则表达式之间的区别 madhur and madhur 就我而言 第二个建议匹配madhur字符串中零次或一次 第一个与第二个有什

  • Python/Pandas 计算 Ichimoku 图表组件

    我有 Pandas DataFrame 对象 其中包含日期 开盘价 收盘价 每日最低股票数据和最高股票数据 我想计算的组成部分Ichimoku https www investopedia com terms i ichimoku clou

  • 如何在 Ubuntu 18.04 上安装或升级到 sqlite 3.33.0？

    我目前正在运行带有 SQLite3 的 Ubuntu 18 04 SQLite 3 的版本为 3 22 0 我需要将其升级到版本 3 33 0 以利用可用的新功能 如果我使用 apt get 删除并重新安装 SQLite3 它只会重新安装

  • 如何在 woocommerce 中获取产品的特色图片

    请告诉我哪里出错了 产品特色图片未显示 args array post type gt product posts per page gt 80 product cat gt profiler orderby gt rand loop ne

  • 如何在 Enterprise Architect 中自动生成 HTML 输出

    Enterprise Architect 有一种方法可以生成 HTML RTF 等格式的文档 您可以发布它 但您必须使用其 GUI 手动执行此操作 当您的 eap 文件位于 CVS Subversion 服务器中时 拥有一个每天检查最新版本

  • 将固定大小的 ImageView 在父 ConstraintLayout 中水平居中

    我有一个相当简单的布局 AConstraintLayout占满整个屏幕 一大片CardView在顶部有一个ImageView那是一半CardView和上面的一半 实际上不是一半 但你明白了 然而 有两个问题 ImageView粘在父级的左侧

  • dplyr 连接 A 列或 B 列

    如何使用 dplyrs 连接函数在 R 中通过 OR 语句连接 2 个表 例如 使用以下密钥将 df1 加入到 df2 上 df1 ColumnA df2 ColumnA 或 df1 ColumnA df2 ColumnB library

  • Boost::GIL 如何将图像以 JPEG 或 PNG 格式保存到 char* 中？

    所以我在保存到文件时看到了很多示例 但我想知道是否可以保存到 char 或字符串而不是文件中 也就是说将其保存在内存中 boost 本身似乎没有任何东西可以促进这一点 所有 I O 似乎都基于提供文件名 不过好像还有延伸here http

  • 在可编辑模式下使用单独的源目录安装包

    情况 这是示例包的结构 tree Foo Foo setup py src bar py init py 包的名称应为foo但是包的源文件放置在src folder 文件的内容是 设置 py from setuptools import s

  • 隐藏 ASP.NET MVC5 中某些角色的链接

    所以这听起来可能是一个愚蠢的问题 但如何仅为管理员用户显示链接 假设普通用户看到以下链接 主页 关于 联系我们 管理员用户会看到以下链接 主页 关于 联系 管理员 我尝试限制控制器并链接菜单上的控制器 但它仍然向所有人显示链接 只是不允许除

  • std::shared_mutex 和 std::shared_lock 是读者更喜欢还是作者更喜欢？

    在读写锁的实现中 我们可以利用std shared mutex with std shared lock and std lock guard or std unique lock Question gt 这个新专题是作者还是读者更喜欢 根

  • android中是否需要关闭参数/参数InputStream？

    所有流和 bufferedReader 都需要关闭我的问题是如果 流和 bufferedReader 位于方法参数 参数内 也需要关闭吗 正常代码示例 InputStream i entity getContent i close 问 如果

  • 如何将代码从 O(n^2) 优化为 nlog(n)

    给定一个数字数组 以产生最大值的方式排列它们 例如 如果给定数字为 54 546 548 60 则排列 6054854654 给出最大值 如果给定的数字是 1 34 3 98 9 76 45 4 则排列 998764543431 给出最大值

  • 从数据库执行代码

    我有一个 PHP 代码存储在数据库中 我需要在检索时执行它 但我的代码是HTML和PHP的混合体 主要用在echo 看起来像我的代码的示例 echo Some Text var something more text anotherVar

  • WPF 应用程序不再显示主窗口

    我的应用程序构建并运行良好 我在任务栏中看到一个图标 显示该窗口存在 但它从未显示 我从 app xaml 调用 StartupUri MainWindow Xaml 而 mainwindow 仅包含一些函数和 InitializeComp

  • 在 Xcode 10 中找不到 -lstdc++.6 的库

    我无法在 Xcode Beta 和 GM 版本中构建基于 Cordova 的 iOS 应用程序 因为在此项目中使用 lstdc 6 为什么因为苹果已经弃用了 lstdc 6这个库在较新的 Xcode 版本中 所以我已经从Link Binar

  • 在 Activity 之间传递 ArrayList

    我已经实现了一个 Parcelable 类 public class Evento implements Parcelable private int private String private String imagen more at

  • 有没有办法通过一次操作从 TFS 中的各个文件夹中检出多个文件

    有没有办法通过一次操作从 TFS 中的各个文件夹中检出多个文件 我已经修改了多个目录下的多个文件 但我希望它们只需单击一次即可签出 也可以单击一次签入 Thanks 是的 使用 TFS 命令行客户端 tf exe 如果您有可用的 tf ex

  • window.pageYOffset 始终为 0，并且溢出-x: 隐藏

    我正在创建一个网页 其中包含一些仅需要在特定时间滑入的屏幕外内容 为了实现这一目标 我正在设置overflow x hidden on html body 这样用户就无法向左或向右滚动来获取内容 但是 在应用程序中的某个时刻 我还需要用户向

热门标签