使用箭头键滚动 div

2024-03-16

这类似于SO:如何用箭头键移动div https://stackoverflow.com/questions/4950575/how-to-move-a-div-with-arrow-keys,所以也许一个明确且知情的“不”就足以作为答案:

我可以将溢出的 div 设置为对向上/向下/向下翻页/空格做出反应的“默认滚动目标”吗与溢出文档相同的方式(即向下滚动内容)?页面本身没有滚动条(下面是简单的示例)。特别是,这是否可以实现没有明确跟踪关键事件(既不直接也不被 JS 库隐藏)?

<html>
 <body>
  <div id="contentcontainer" style="height:200px;width:200px;overflow:scroll">
   <div id="innercontent" style="height:2000px;">foo</div>
  </div>
 </body>
</html>

Edit:当然,当我点击 div 后,上面的内容就起作用了。基本上,我想避免这样做......


为了使 html 元素具有焦点,必须可以使用 Tab 键访问它。这意味着您可以致电.focus()在链接或输入上。此外,body元素始终是可聚焦的。

您需要使您的 div 可通过 Tab 键访问。您可以通过设置来完成此操作tabindex其上的财产。如果您实际上并不希望人们能够通过 Tab 键进入该 div,则可以将 tabindex 设置为 -1,这将阻止人们实际通过 Tab 键进入该 div,但会将该元素设置为 Tab 键并获得焦点。

Source: http://help.dottoro.com/ljpkdpxb.php http://help.dottoro.com/ljpkdpxb.php

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

使用箭头键滚动 div 的相关文章

  • CSS class 和 id 同名

    css class 和 id 同名有什么问题吗 就像文章 帖子页脚的 footer 和页面页脚的 footer 一样 不 完全可以接受 一个类是使用 a 来定义的 并且 ID 是使用定义的 因此 就浏览器而言 它们是两个完全独立的项目 唯一
  • IE 11 的 Map(iterable) 替代方案

    不幸的是我必须支持IE11 我使用以下代码创建地图 已使用 entries 的 polyfill const map new Map Object entries array 但由于IE11不支持iterable构造函数中Map 是空的 我
  • 无法解构“undefined”或“null”的属性“user”

    使用 redux 检索用户信息时出错 我想从数据库获取用户信息 姓名 密码和头像地址 然后对其进行编辑 我正在使用nodejs express react redux 和jwt Actions user js import axios fr
  • 在 Javascript 中缓存和预取过期的 Promise

    Promise 是我在 Javascript 中管理异步代码的首选方式 Memoize npm 上的 memoizee 是一个 Javascript 库 用于轻松缓存和预取函数结果 理想情况下 我想结合两者的优点 并且能够使 Promise
  • 从 onclick 属性调用 e.stopImmediatePropagation()

    如何从事件对象中获取事件对象onclick属性 我努力了 a href something html Click me a 另外 我也尝试过这个 a href something html Click me a 但控制台只显示 a 元素 我
  • Sonarqube 未从 LCOV 检索我的 JavaScript 覆盖范围

    我有一个具有以下结构的应用程序 my application pom xml app scripts app js js 3rd party libs build node modules test 我已经创建了pom xml仅运行 Son
  • jQuery 上下文菜单下拉菜单

    我正在使用这个 contextMenu 模板 http medialize github com jQuery contextMenu index html http medialize github com jQuery contextM
  • JavaScript 按属性删除对象数组中的元素

    我有一个以下形式的对象数组 prop1 value1 banks id value property2 value2 所以我想要做的是通过搜索 id 值来删除 banks 属性中的元素 然后从banks数组中删除找到的元素 id 属性具有唯
  • 如何对结构切片而不是切片结构进行范围调整

    稍微玩了一下 Go HTML 模板后 我发现的所有循环模板中对象的示例都是将切片结构传递给模板 有点像这个示例 type UserList struct Id int Name string var templates template M
  • 为什么onClick下一个视频函数,使用YouTube JavaScript Player API,质量下降到默认?

    我在 CodeIgniter 上遇到了这个问题 使用 next video API 函数 单击按钮时新视频的质量比以前的低 所以基本上第一个视频始终处于我建议的质量 而下一个始终处于默认质量 On my template我有这个div di
  • jQuery:根据鼠标位置移动的全屏“背景”图像[关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在尝试实现一个根据鼠标位置移动的全屏背景 例如 如果您将鼠标移动到左上角 视口将显示图像的左上角以
  • 当直接调用函数时,React 如何/为什么知道函数组件内没有调用钩子?

    出于好奇 我想call直接一个React函数组件 就像常规函数一样 然而 React 抱怨道 Invalid hook call Hooks can only be called inside of the body of a functi
  • Python Flask 不更新图像[重复]

    这个问题在这里已经有答案了 这里有一些关于图像的 Flask 问题 但没有一个能解决我的问题 我有一个应用程序可以创建图像 保存它 然后显示它 一次 它应该多次执行此操作 每次更改图像时 它应该加载新图像 它不是 它只显示与其显示的文件名关
  • 删除数组中的重复元素[重复]

    这个问题在这里已经有答案了 可能的重复 在 JavaScript 数组中查找重复值的最简单方法 https stackoverflow com questions 840781 easiest way to find duplicate v
  • ES6 Bare Import:如何使用以及何时使用?

    ES6 允许我们使用新的导入语法 使用它 我们可以将模块导入到我们的代码中 或者这些模块的一部分 使用示例包括 Import the default export from a module import React from react
  • 打开我网站上的链接不起作用

    在我的网站上 我有一个我正在尝试获取工作的链接 我有一个遵循正常格式的链接 即 href 以 www youtube com 作为目标链接 并在末尾添加 target blank 当我单击该链接时 托管我的网站的网站会显示一条错误消息 当我
  • 使用 javascript 将子元素添加到父元素

    我正在尝试添加一个子元素 to a 父元素如下 li要添加到ul 单击 Enter 按钮或按下键盘上的 Enter 键时 会生成一个新的li and delete按钮应该添加到ul 我的代码无法正常工作 有人可以帮我解决这个问题吗 HTML
  • 使用 JavaScript 更改网址栏中的域名

    有没有办法使用window history pushState或者任何其他js函数来更改地址栏中的整个url 我无法删除根部分 上下文 我的应用程序位于 Heroku 上 网址如下所示http mywebsite herokuapp com
  • 从 Bigcommerce 的浏览器内存中删除注入的分析库?

    我们如何删除这个脚本注入器系统并清除内存中的函数 简报 最近 Bigcommerce 的不法分子以 监控 为幌子创建了一个分析注入器 JS 该注入器被锁定在全局变量中 他们在未经任何 OP 同意的情况下将其推广到所有 50 000 家前台商
  • 高图表的分散工具提示未显示

    我有一个散点图和条形图 我无法查看酒吧上方散点的工具提示 这是小提琴http jsfiddle net tZ9Rt http jsfiddle net tZ9Rt 我正在使用这两个系列 series type scatter index 2

随机推荐

  • 将小多边形堆叠在另一个较大的多边形内

    我有以下形状优美的像素多边形 big poly Polygon 94 5 77 0 92 5 53 0 87 5 45 0 66 0 20 5 9 0 3 5 5 5 6 0 4 5 13 0 7 5 26 0 6 5 91 0 8 0 9
  • 去比较字符串

    给定两个字符串a and b 有时我想确定这三个语句中的哪一个 a lt b a b or a gt b是真的 在 C 或 C 等语言中 我将得到一个 int 值v在调用相应的函数或方法后 然后我可以通过检查是否可以确定上述哪一个陈述是正确
  • 在Flutter中使DataTable双向滚动

    如何使数据表双向滚动 我使数据表水平滚动 但我的列表很大并且无法向下滚动 override Widget build BuildContext context return Scaffold appBar AppBar title Text
  • 让QGraphicsView做平滑centerOn

    我并不是 Qt 的新手 但有一些事情我不知道 我正在使用 Python 进行编程 但请随意以任何语言发布您的答案 所以 我有几个QGraphicsItem s 位于QGraphics场景 以正常观看场景QGraphicsView 一切正常
  • 你能克隆一个匿名对象吗? (Java/面向对象编程)

    我正在创建一个非常常见 非常简单的形状的库 球体以及环面等都将成为成员 环面有两个半径场 而球体有一个 我们可以通过更改函数的实现以包含两个半径来提供修改后的行为 当然还可以添加额外的半径字段 环面很常见 因此将这种行为包含在永久库中是有益
  • 首先添加一个UIView,甚至是导航栏

    我想在任何其他视图 甚至导航栏 上方显示一种 弹出 视图 如下所示 全屏黑色背景 alpha 为 0 5 可以看到其他内容UIViewController下 a UIView中间的窗口包含一些信息 如果您想了解一切 则可以使用日历 为此 我
  • 如何检查 Java 上的 SSLSocket 连接是否正常?

    我有一个 SSLSocket 池 我需要在借用对象之前检查套接字连接是否正常 isConnected isInputShutdown 和 isOutputShutdown 没有用 因为它们不检查双方是否已连接 如果我尝试从套接字写入或读取
  • 删除表中的行会导致 LOCKS

    我正在运行以下命令从大型表 1 5 亿行 中批量删除行 DECLARE RowCount int WHILE 1 1 BEGIN DELETE TOP 10000 t1 FROM table t1 INNER JOIN table2 t2
  • 为什么 React useState 钩子不能在 for 循环中工作?

    我很好奇为什么在 for 循环中设置状态不能按预期工作 这是我使用钩子的代码 const count setCount useState 0 const onButtonPress gt for let i 0 i lt 100 i set
  • 此脚本(使用 Outlook 发送电子邮件)如何工作?

    谁能帮助我了解 MAPI 的工作原理 我有一个简单的 vbscript 它使用 MAPI 发送电子邮件 它工作得很好 但是 我不知道它是如何做到的 后台发生了什么 Const ForReading 1 Set args WScript Ar
  • Jquery - 根据 的内容应用类

    我有一个水平导航菜单 我可以编辑其源代码 我唯一的选择是在通过 JQUERY 加载时动态添加类 假设我有 3 个选项卡 Home Profile Blog 每个都有一个链接 如下所示 a href home html Home a JQUE
  • 按距给定的升序距离对点数组进行排序

    我需要你的帮助 我有一个已知坐标的点 例如 x 5 y 4 和每个代表点的对象数组 x 2 y 6 x 14 y 10 x 7 y 10 x 11 y 6 x 6 y 2 现在我需要按距给定点的距离按升序对数组进行排序 例如 x 6 y 2
  • 识别表中所选行何时已被选择

    我有一个p datatable在 primefaces 中 我有不同的侦听器 以不同的方式在数据表中选择行事件 我需要确定表中所选行何时已被选择 我该怎么做 我需要这个因为我不想那个p blockUI当我选择表中已选择的行时运行 有我的页面
  • textcat -> 不允许架构额外字段

    我一直在尝试练习从本教程中学到的知识 https realpython com sentiment analysis python https realpython com sentiment analysis python 使用 PyCh
  • 如何仅使 Dropzone.js Previews Div 可点击而不是整个表单

    我必须使用 dropzone js 表单 它将几个输入和一个文件上传信息发送到另一个页面 我的 dropzone 代码如下所示 gt Dropzone options mydropzone maxFiles 1 maxFilesize 10
  • 如何在Python中根据特定日期提取前两年的数据?

    我有一个 csv 文件 其中包含过去 3 年的时间序列月度数据 根据今天的日期 我只想读取前两年的数据来预测未来 Data file example has data from 01 01 15 to 31 10 19 Date Value
  • iOS 10 后台 CoreBluetooth 广告

    首先 我有一台 iPad Air 2 和一台 iPhone 7 为了进一步阅读 我们估计该应用程序在 iPad 上处于活动状态并打开 在 iPhone 上处于后台模式 该应用程序完全相同 即使具有相同的蓝牙服务 UUID 和相同的 Data
  • UIDocument 未保存?

    无论我尝试什么 这都行不通 我正在尝试使用UIDocument在本地保存我的 文本 文件 当我创建文件 即未加载 时 它保存得很好 However 如果我通过打开文件然后保存来加载文件 则它根本不会保存 EDIT 我尝试在应用程序进入后台时
  • SQL 条件并集

    问题 我有一个返回文件列表的 SQL 函数 现在我应该使用联合将一个附加列表加入到该列表中 但前提是用户是管理员 那可能吗 就像是 CREATE FUNCTION tfu CMS Process bIsAdmin bit Add the p
  • 使用箭头键滚动 div

    这类似于SO 如何用箭头键移动div https stackoverflow com questions 4950575 how to move a div with arrow keys 所以也许一个明确且知情的 不 就足以作为答案 我可