javascript - 您如何确定屏幕上哪个元素具有滚动优先权？-6ren

javascript - 您如何确定屏幕上哪个元素具有滚动优先权？

转载作者：行者123 更新时间：2023-12-05 00:33:42

26

4

当我尝试在一个范围内拥有多个滚动条时，会发生一些奇怪的事情。让我澄清一下，在我的代码中，pageContainer 的 id 与“scrollfield”同义，而 contentWrap 的 id 在我下面的解释中与“subscrollfield”同义。
让我也澄清一下，有两个问题:

第一个是滚动功能。 Firefox 是唯一遇到此问题的浏览器，我在其各自的部分中对其进行了描述。它只能在 Firefox 中测试。

第二个是我想如何为滚动添加自定义属性。这目前在 Chrome 中是可测试的，在我得到 Firefox 工作的第一个问题后，它也可以在 Firefox 中测试。

问题一 (对于 PC 上的 Firefox):
--当你在滚动域(子滚动域)内滚动滚动域时，必须先移动鼠标，才能让客户端知道你打算在子滚动域中滚动；否则，它将假定，尽管您的鼠标悬停在子滚动字段上，但您打算在主滚动字段中滚动。换句话说，我希望您悬停的任何滚动字段都可以滚动。
--TO TEST:一直滚动到代码片段的底部，然后一直滚动到顶部。 在开始放置鼠标后不要移动鼠标! 这将揭示问题——subscrollfield 没有滚动，即使鼠标悬停在其 div 上也是如此。
一旦 Firefox 的问题得到修复，就会出现 Chrome 遇到的问题:
问题二 (适用于 PC 上的 Chrome 或 MAC 上的浏览器):
- 当您在滚动字段(子滚动字段)内的滚动字段中滚动时，它会按预期工作，但我想这样做，如果您在页脚处并且将鼠标悬停在子滚动字段上，则从页脚向上滚动，然后在子字段中向上滚动，然后在主字段中向上滚动。换句话说，如果您向上滚动时光标位于子滚动字段上，我不希望页脚停留在页面底部。
--TO TEST:滚动到滚动片段的底部，同时将光标保持在屏幕中间，然后向上滚动；您将看到子滚动字段首先向上滚动(将页脚保持在底部)，然后滚动字段向上滚动。我如何让相反的事情发生？
这是我网站的伪代码:

body {
  overflow-y: hidden;
}

#pageContainer {
  overflow-y: scroll;
  height: 100vh;
  scroll-snap-type: y mandatory;
}

.snapPoint {
  position: relative;
  scroll-snap-align: start none;
}

#prelude {
 height: 100vh;
 overflow: hidden;
 background-color: #000020;
   }

#header {
  width: 100vw;
  height: 9.75vh;
  z-index: 3;
  background: linear-gradient(to top, #167988 0%, #1590A3 20%, #1DB3CA 100%);
  overflow: hidden;
}

#contentWrap {
  overflow-y: scroll;
  font-size: 4vw;
  padding: 5vh 0 0;
  height: 85.25vh;
  text-align: center;
  background: linear-gradient(#C3C3C3 0%, #F4F4F4 12vh, #F4F4F4 calc(100% - 15vh), #C3C3C3 100%);
}

#footer {
  background: linear-gradient(to top, #167988 0%, #1590A3 20%, #1DB3CA 100%);
  height: 10vw;
  width: 100vw;
  z-index: 3;
  overflow: hidden;
}

<body>
  <div id="pageContainer"><!--THIS CONTAINS THE MAIN SCROLL SCOPE (WITH SNAP)-->
    <div id="prelude" class="snapPoint"><h1 style = "color: #F4F4F4;">PRELUDE</h1></div>
    <div id="header" class="snapPoint"></div>
    <div id="contentWrap"><!--THIS CONTAINS THE SUB-SCROLL SCOPE-->
      <p>Test One<br/><br/><br/>Test Two<br/><br/><br/>Test Three<br/><br/><br/>Test Four</p>
    </div>
    <div id="footer" class="snapPoint"></div>
  </div>
</body>

我应该如何处理这个问题？我可以编写 JavaScript 来解决这个问题，还是有一些我没有考虑的 CSS 技术？

最佳答案

如果我正确理解您的问题，请尝试添加 overscroll-behavior: none在 contentWrap div 上。

关于javascript - 您如何确定屏幕上哪个元素具有滚动优先权？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66814481/

26

4

0

文章推荐： javascript - Vue3 中的 watch() 会在组件卸载时自动停止吗？

文章推荐： javascript - 如何修改交易 View 小部件指标的默认样式？

java - Selenium Web 驱动程序无法单击前台对话框的“确定”按钮并找到后台对话框的“确定”按钮
我正在使用 Selenium Web 驱动程序 3.0，并且想要从打开的两个对话框(一个在后台，第二个在前台)的 Activity 对话框中单击“确定”按钮。如何从 html 下面的父 div 单击前
android - 在 flutter 中，我使用AlertDialog，它具有2个操作按钮“确定”和“取消”，单击“确定”时，我要转到新屏幕并结束当前屏幕？
actions: [ FlatButton( onPressed: () {
sqlite - 在 SQLite 中从接近重复的行(由 GROUP BY、HAVING、COUNT 确定)中选择 "first"(由 ORDER BY 确定)行
我有一个问题有点超出我的范围(我真的很高兴我是 Beta)涉及重复项(所以 GROUP BY, HAVING, COUNT)，通过将解决方案保留在 SQLite 附带的标准函数中而变得更加复杂。我正在
perl - 确定$ sth是否有行而不消耗它？
使用DBI是否可以确定SELECT语句的已执行语句句柄是否返回任何行而不从中获取行？ IE。就像是: use DBI; ... my $sth = $dbh->prepare("SELECT ..."
语义用户界面模式关闭-确定/取消回调
是否可以为“确定”和“关闭”按钮指定回调函数？如果是JQuery Modal，则可以在初始化时使用按钮字典指定回调函数。 Semantic-ui模态是否提供类似的功能？按下确定后，我该如何寻求其他逻
selenium - 阅读警报消息并单击“确定”
我想阅读警报中的消息。示例:如果警报显示“错误的电子邮件地址”。怎么读呢？意味着我想将该消息存储在字符串中。如何在“警报”中单击“确定”...？？如何使用 Selenium 来做到这一点？最佳
javascript - 确定 if 语句中是否选择了任何选项
我有一个删除按钮: 我试图首先查明是否已选择一个网站，如果已选择一个网站，我需要确定是否已选择一个或多个列表项，如果是，则继续删除这些项目。我的 if 语句不断返回“您必须首先选择您的列表”，即使它
.net - 确定.NET中对象图的内存使用率
部分出于好奇——我们想知道在我们的应用程序中发生了什么——部分是因为我们需要在我们的代码中找到一些潜在的问题，我喜欢在我们的网络应用程序运行时跟踪一些一般值。这尤其包括某些对象图的分配内存。我们的应
jquery - 甜蜜警报不会等到用户单击“确定”
我将 SweetAlert 与 Symfony 结合使用，我希望用户在完成删除操作之前进行确认。发生的情况是，当用户单击删除按钮时，SweetAlert 会弹出，然后立即消失，并且该项目被删除。在
c# - 确定.NET中随机生成的代码中是否包含任何淫秽词语的有效方法
我们有一个应用程序可以生成不包括字母 O 的随机基数 35 [0-9A-Z]。我正在寻找一种解决方案来查找包含任何淫秽英语单词的代码，而无需搜索包含 10,000 个条目的列表每个生成的代码。每秒生成
c - 确定、存储和打印给定范围内的所有整数
这是我做的: #include #include int betweenArray(int a, int b){ int *arr,i,range; range = b - a +
javascript - 在提示中单击“确定”
我知道如何创建警报和确认框，但我不知道如何做的是实际单击“确定”。我有一个弹出确认框的页面。我想使用 Java Script 插件单击“确定”。基本上，我希望我的代码单击页面上的链接，然后在出现提
javascript - 无法使用甜蜜警报单击“确定”
代码: swal('Your ORDER has been placed Successfully!!!'); window.location="index.php"; 甜蜜警报工
python - 确定 OR 正则表达式的哪个片段与字符串匹配
>>> import re >>> s = "These are the words in a sentence" >>> regex = re.compile('are|words') >>> [m
确定 2 个数组是否不相交的算法
使用确定的理想散列函数给出随机期望线性时间算法两个数组 A[1..n] 和 B[1..n] 是否不相交，即 A 的元素是否也是 B 的元素。谁能告诉我如何做到这一点，甚至如何开始考虑它？最佳答案
java - 确定 while 循环的迭代次数
我在计算机科学课上有这段代码: int input=15; while (input < n ) { input = input *3;} 这段代码有 log3(n/15) 次循环的上限。我们怎样才能
确定 TicTacToe 游戏状态的算法？
我有一个允许 2 位玩家玩 TicTacToe 的程序。在每个玩家移动之后，它应该在那个点显示棋盘并返回一个名为 Status 的枚举，显示玩家是否应该继续，如果玩家赢了，还是平局。但是，该算法要么返
确定 Y 轴标签和位置的算法？
给定一个 y 值数组，例如 [-3400, -1000, 500, 1200, 3790]，我如何确定“好的”Y 轴标签并将它们放置在网格上？ ^ ---(6,000)-|---
php - 确定 WHERE 语句的哪些部分失败
假设我有一个检查用户登录的 SQL 语句: SELECT * FROM users WHERE username='test@example.com', password='abc123', expi
indexing - 确定 Teradata 中表的主索引
teradata中有返回表中哪一列被定义为主索引的命令吗？我没有制作一些我正在处理的表，也没有尝试优化我对这些表的连接。谢谢! 最佳答案有dbc.IndicesV，其中IndexNumber=1表示

首页

博学

6Ren·AI

商城

javascript - 您如何确定屏幕上哪个元素具有滚动优先权？