开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用箭头键滚动时，将菜单顶部设置在ul元素的中间

，可以通过以下步骤实现：

首先，需要确定ul元素的高度和可视区域的高度。可以使用CSS的height属性设置ul元素的高度，使用JavaScript的clientHeight属性获取可视区域的高度。
接下来，需要监听键盘事件，以便捕获箭头键的按下事件。可以使用JavaScript的keydown事件监听键盘按键。
在键盘事件的处理函数中，判断按下的是上箭头键还是下箭头键。可以使用JavaScript的event.keyCode属性获取按下的键码，上箭头键的键码是38，下箭头键的键码是40。
如果按下的是上箭头键，将ul元素的scrollTop属性设置为当前scrollTop减去可视区域高度的一半。这样就可以将菜单顶部设置在ul元素的中间。
如果按下的是下箭头键，将ul元素的scrollTop属性设置为当前scrollTop加上可视区域高度的一半。这样也可以将菜单顶部设置在ul元素的中间。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    ul {
      height: 200px;
      overflow: auto;
    }
  </style>
</head>
<body>
  <ul>
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
    <li>菜单项4</li>
    <li>菜单项5</li>
    <li>菜单项6</li>
    <li>菜单项7</li>
    <li>菜单项8</li>
    <li>菜单项9</li>
    <li>菜单项10</li>
  </ul>

  <script>
    var ul = document.querySelector('ul');
    var visibleHeight = ul.clientHeight;

    document.addEventListener('keydown', function(event) {
      if (event.keyCode === 38) { // 上箭头键
        ul.scrollTop -= visibleHeight / 2;
      } else if (event.keyCode === 40) { // 下箭头键
        ul.scrollTop += visibleHeight / 2;
      }
    });
  </script>
</body>
</html>

这段代码中，ul元素的高度被设置为200px，并且使用了overflow: auto属性，以便在内容溢出时显示滚动条。键盘事件被添加到整个文档上，当按下上箭头键或下箭头键时，ul元素的scrollTop属性会相应地进行调整，从而实现将菜单顶部设置在ul元素的中间。

相关搜索:如何将Bootstrap导航菜单设置为滚动时停留在页面顶部使用fadeIn/fadeOut设置元素动画时，元素顶部的元素会闪烁在滚动时查找位于可见屏幕(视口)中间的元素如何在打开dropdown时将dropdown滚动条设置在顶部无法在顶部使用固定的菜单栏进行滚动后修复div 将隐藏元素添加到在滚动上显示的粘滞菜单如何在Flutter中使用ListView或CustomScrollView在顶部添加新元素时保持滚动位置使用jQuery多次设置元素文本时，.setTimeouts成功跳过.setTimeouts的中间实例缩放后使用平移将元素放置在另一个元素的顶部在将父元素滚动到视图中时，使用jQuery和css3的TranslateX()显示元素 Javascript -在div内滚动且数组中的每一项到达顶部时显示元素 ValueError:在将数据拟合到svm时使用序列设置数组元素使用React useEffect在页面加载时滚动到元素中的位置如何使放在fabricjs对象顶部的DOM元素即使在水平滚动时也留在那里将元素保持在到顶部的特定偏移处，然后在1000px滚动后释放当我在页面中间重新加载页面时，滚动的导航栏将恢复为默认值在express应用程序中使用使用fs的中间件时设置报头的问题在使用v-system-bar并设置hide-on-scroll时，如何将v-app-bar设置为顶部？无法在单击时将侦听器设置为Kotlin中的元素在使用jquery滚动时，div元素的类发生更改时没有实时响应

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

css布局 - 常规上中下分左右布局的一百种实现方法（更新中...）

概括：如图，此种布局就是顶部、底部和左侧固定不动，只有中间右侧超出可滚动。...概括：如图，此种布局大致同第一幅，顶部、底部固定不动，只有整个中间区域可滚动，包括左侧菜单栏。...这里唯一不同的是左侧菜单栏要同内容区域一同滚动：去掉fixed固定定位即可。 ?...四、上下固定中间分左右的单页布局 - flex实现，嵌套使用在第三的基础上，中间还想分成左右两份，结合第二中section也flex的实现，就有了四。...html：头部遇到这种布局，通常想到用fixed固定顶部和尾部，然后中间的有个和顶部尾部同值的上下padding

6.7K2 0

提高效率 |ArcGIS Pro 中所有快捷键一网打尽

将未完成的文本翻转 180 度至随沿边的左侧或右侧。使用随沿要素创建文本时，可以使用此快捷键。 O 使用“随沿要素”选项。打开编辑器设置对话框。使用随沿要素创建文本时，可以使用此快捷键。...当照相机移动时，调整鼠标指向以设置您要行驶的方向。可以选择使用 W 和 S 键更改方向。左箭头键和右箭头键 从视图中心向左或向右移动照相机。...按住左箭头或右箭头键可垂直于照相机当前的视图方向左或向右移动照相机。当照相机移动时，调整鼠标指向以设置要相对垂直行驶的方向。可以选择使用 A 和 D 键更改方向。...Ctrl+D 为选定的模型元素选中添加到显示。 Ctrl+Shift+D 为选定的模型元素取消选中添加到显示。 Ctrl+I 为选定的模型元素选中中间数据。...要在不打开字段视图的情况下重新显示所有字段，请单击表格视图顶部的菜单按钮，然后单击显示所有字段。此时，所有隐藏字段将恢复为显示状态，并在表格视图和其他对话框中变为可用状态。

1.1K2 0

【移动端网页布局】流式布局案例 ④ ( Banner 栏制作 | 固定定位 | 标准流 | 百分比宽度设置 )

{ /* 第二排搜索栏样式 */ /* 该样式在滑动时 , 始终在最上方显示 */ position: fixed; /* 防止外边距塌陷进行的设置 */ overflow...45 像素 */ height: 45px; } .app ul li { /* 设置左浮动令列表元素水平排列 */ float: left; /* 设置高度 45...vertical-align: middle; } .app ul li:nth-child(3) { /* 中间的 "打开京东APP, 实惠又轻松" 文本盒子的宽度 */ width...width: 40px; height: 44px; } .search-btn::before { /* 在指定的标签元素内部的前面插入内容 */ /* 左侧按钮盒子中...图标的右上角 right 值为负数说明该竖线在 JD 图标之外 */ right: -8px; top: 0; /* 设置显示模式为块级元素可以设置宽高 */ display

1.7K2 0

CSS固定定位与粘性定位4大企业级案例

前面两篇文章为大家详细讲解了相对定位与绝对定位的应用场景和案例。如果想了解的可以在公众号里面查看去看。本小节我们学习下固定定位与粘性定位的应用场景和案例。...常见的应用有：楼梯式导航、浏览器右侧菜单、底部通栏、全屏黑色半透明遮罩弹出层、弹出注册和登录框、左上固定右自适应后台管理系统布局粘性定位当滚动的高度>元素与浏览器的高度时，会以fixed固定定位显示...当滚动高度<元素与浏览器高度时，会以relative相对定位显示。...常见的应用有：吸顶盒导航,滚动吸附效果 1、楼梯式导航、浏览器右侧菜单、底部通栏（固定定位应用）这三个案例用都是用固定定位来控制其与浏览器位置。...（固定定位应用）顶部导航和左侧菜单相对于浏览器固定定位。

1.6K3 0

如何使用Midnight Commander，一个可视文件管理器

[7bbnqsc8rr.png] 在屏幕顶部，您可以看到带有文本的彩色条： Left，File，Command，Options， Right。...这些是下拉菜单，可以通过按F9然后使用箭头键进行导航来访问这些菜单。按F9键，然后按向下箭头键多次，直到Tree高亮，按ENTER确认。该面板现在将更改为树视图显示文件和目录。...您还可以使用鼠标指针单击界面元素。使用两个面板来处理文件和目录使用TAB键在左右垂直面板间切换。使用F10关闭Midnight Commander程序。...将example替换为您在远程计算机上创建的用户名并将203.0.113.1替换为服务器的IP地址。仅当另一端的服务器接受密码登录时，连接才能生效。...您还可以通过将这些设置复制到其他服务器的同一位置来进行配置克隆。

8.6K6 2

bootstrap源码分析之scrollspy（滚动侦听）

源码文件： Scrollspy.js 实现功能 1、当滚动区域内设置的hashkey距离顶点到有效位置时，就关联设置其导航上的指定项 2、导航必须是 .nav > li > a 结构，并且a上href...div> 源码分析： 1、原理：当滚动容器内的hashkey位置距离容器顶部只有 offset设置的值，就会设置导航中对应的href高亮 2、如果滚动区域是body，会将滚动区域元素标记为window（...，用于计算当前需要高亮那个导航菜单 5.1、获取滚动容器已滚动距离： var scrollTop = this....$scrollElement.height() 5.3、设置滚动元素逻辑： for (i = offsets.length; i--;) {//遍历所有的offset activeTarget...& this.activate(targets[i]) //设置i为当前活动项 } 6、active：设置指定的导航菜单高亮 7、clear：清除所有高亮菜单

1K10 0

浮动清楚浮动及position的用法

right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧。 inherit 规定应该从父元素继承 clear 属性的值。...对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。...fixed（固定） fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。...因为它原本所占的空间仍然占据文档流。在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。示例代码： <!...综合示例顶部导航菜单 <!

2.1K4 0

使用 sroll-snap-type 优化滚动

}　　上面 scroll-snap-type: x mandatory 中，x 表示捕捉 x 轴方向上的滚动，mandatory 表示强制将滚动结束后元素的停留位置设置到我们规定的地方。...再看看实际的 Demo ，将 scroll-snap-align 添加到滚动子容器上： scroll-snap-align: start 使当前聚焦的滚动子元素在滚动方向上相对于父容器顶部对齐。 ?...CodePen Demo -- CSS Scroll Snap Demo 不规则子元素滚动如果子元素大小不一，也能有非常好的表现，使用 scroll-snap-align: center，使得不规则子元素在每次滚动后居于容器中间...然而可选的值只有三个，有的时候我们希望进行一些更精细的控制时，可以使用 scroll-margin 或者 scroll-padding 其中： scroll-padding 是作用于滚动父容器，类似于盒子的...padding scroll-margin 是作用于滚动子元素，每个子元素的 scroll-margin 可以设置为不一样的值，类似于盒子的 margin 举个例子，在竖向滚动下，给滚动父容器添加一个

1.5K3 0

Windows10中的键盘快捷方式

向上键将光标移动到上一段落的起始处 Ctrl + Alt + Tab 使用箭头键在所有打开的应用之间进行切换 Alt + Shift + 箭头键 当组或磁贴的焦点放在“开始”菜单上时，可将其朝指定方向移动...Ctrl + Shift + 箭头键 当磁贴的焦点放在“开始”菜单上时，将其移到另一个磁贴即可创建一个文件夹 Ctrl + 箭头键 打开“开始”菜单后调整其大小 Ctrl + 箭头键（移至某个项目）+...当出现 Windows 提示时，请将焦点移到提示上。再次按下键盘快捷方式，将焦点放在屏幕上 Windows 提示所固定的元素上。...（在第二个笔划时还原所有窗口） Windows 徽标键 + Shift + 向上键将桌面窗口拉伸至屏幕顶部和底部 Windows 徽标键 + Shift + 向下键在垂直方向上还原/最小化活动桌面窗口...当出现 Windows 提示时，请将焦点移到提示上。再次按下键盘快捷方式，将焦点放在屏幕上 Windows 提示所固定的元素上。

4.5K2 0

python测试开发django-136.Bootstrap 顶部导航navbar

前言页面顶部导航可以固定在屏幕顶部，不用随着页面上下拖动而滚动。...Bootstrap 框架可以用 .navbar 快速实现这种页面效果 navbar导航 navbar导航组件常用的几个 class 属性 .navbar ——设置 nav 元素为导航条组件； .navbar-default...——设置导航条组件固定在底部； .navbar-header ——主要指定 div 元素为导航条组件包裹品牌图标及切换按钮； .navbar-toggle ——设置 button 元素为导航条组件的切换钮...； .collapsed ——设置 button 元素为在视口小于768px时才显示； .navbar-brand ——设置导航条组件内的品牌图标； navbar-brand 默认是放文字的,也可以放图片...--头部右侧导航菜单--> <ul class="nav navbar-nav navbar-right

1.4K2 0

Windows快捷键速查

F3 在文件资源管理器中搜索文件或文件夹。 F4 在文件资源管理器中显示地址栏列表。 F5 刷新活动窗口。 F6 循环浏览窗口中或桌面上的屏幕元素。 F10 激活活动应用中的菜单栏。...Ctrl + 向上键将光标移动到上一段落的起始处。 Ctrl + Alt + Tab 使用箭头键在所有打开的应用之间进行切换。...Alt + Shift + 箭头键 当组或磁贴的焦点放在“开始”菜单上时，可将其朝指定方向移动。...Ctrl + Shift + 箭头键 当磁贴的焦点放在“开始”菜单上时，将其移到另一个磁贴即可创建一个文件夹。 Ctrl + 箭头键 打开“开始”菜单后调整其大小。...Alt + 所选择的键开始在块模式下选择。 箭头键 按指定方向移动光标。 Page Up 将光标向上移动一个页面。 Page Down 将光标向下移动一个页面。

4.2K2 0

Js如何实现当网页超过一屏时导航菜单始终置顶-吸顶盒效果

前言我们平时在逛一些电商网站时,无论是首页还是详情页,通常会有一个导航菜单石红跟随着页面,无论是页面滚动到中间还是底部这是为了方便用户查看商品的各类信息或提交订单购物也就是吸顶盒效果,那这个效果是怎么实现的...原生Js 如下是原生js // 初始化函数 function init() { // 获取顶部元素的DOM var wrap = document.getElementById("wrap...把顶部的导航菜单设置固定 if(scrollTop > 150) { wrap.className = "fix-top"; // 固定顶部的样式...,就不得不使用css的positon样式,其次,在来控制网页是不是需要把导航菜单置顶,因为当网页内容的浏览没有滑出导航菜单的可见范围时,是没有必要把导航菜单置顶的,因此,在代码中就需要监听网页的滚动跳滑动事件...当超过一定的范围以后,才有必要为导航菜单设置固定的position样式其实也有另外一种解决办法,就是导航栏始终是固定在顶部,当拉动滚动条时到一定的范围,就改变背景色,也是一种解决办法

3.4K5 0

你也许不知道的浏览器的一些滚动行为

✅ 效果对比如下：很明显，前者就是把滚动高度设置成100，而后者是每次都增加100，这就是为什么称之为相对滚动了✅ 如何指定一个元素显示在视窗 1....最常用的方法： // 获取元素的offsetTop(元素距离文档顶部的距离) let offsetTop = document.querySelector(".box").offsetTop; //...} 效果如下：注意：设置了该属性之后，所有方法都可以不用设置behavior参数了，二选一即可，因为都是控制当前指定元素的滚动行为，所以锚点跳转、设置scrollTop也具有平滑(smooth)的滚动行为...滚动结束后，强制滚动到指定元素基于上面的例子，我们设置如下属性： ul { scroll-snap-type: x mandatory; li { scroll-snap-align...: start; } } 效果如下：仔细看会发现，我们松手的时候，会将最近的元素滚动到最右边（初始位置，对于Y轴来讲就是顶部，X轴则是右边）也可以设置出现在中间： li { scroll-snap-align

3K2 0

Ubuntu 17.10 已经发布，图解新功能

当一个窗口触及任何一个元素时，“动态透明度”功能就会启动，以使底座和顶部颜色变暗，从而使面板标签内容在前景更加清晰。...没有一个真正的全局应用程序菜单，大多数应用程序在顶部的一个小菜单中放置了一个关于应用程序名称的小菜单。这些应用程序菜单至少可以包含一个单独的“退出”按钮，最多可以选择最多的选项。...可以通过点击它来启动应用程序，使用键盘箭头键选择它，然后按Enter键，或者触摸（如果您使用的是触摸屏）。...Ubuntu 17.10还提供了一个自定义的GNOME Shell主题，使用Ambiance调色板来调整顶部栏，弹出菜单，会话对话框。在使用某些应用程序时，您可能会注意到一些按钮是绿色的。...“你不会注意到使用Wayland的任何重大差异，从传统的Xorg显示服务器切换到Wayland是一个巨大的变化，但是在使用Wayland时，您不会注意到任何主要的区别。

1.8K9 0

BootStrap应用开发学习入门1

导航元素描述:进行首页导航栏的菜单进行设置，导航菜单与下拉菜单使用相似的语法；默认情况下，列表项的锚与一些数据属性协同合作来触发带有 .dropdown-menu class的无序列表。...#两端对齐的导航 (在屏幕宽度大于 768px 时，通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用它，让标签式或胶囊式导航菜单与父元素等宽。)...锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。...默认情况下，插件把弹出框（popover）设置在顶部。...| object 默认值：10 #data-offset 当计算滚动位置时，距离顶部的偏移像素。

44.8K2 1

BootStrap应用开发学习入门1

导航元素描述:进行首页导航栏的菜单进行设置，导航菜单与下拉菜单使用相似的语法；默认情况下，列表项的锚与一些数据属性协同合作来触发带有 .dropdown-menu class的无序列表。...#两端对齐的导航 (在屏幕宽度大于 768px 时，通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用它，让标签式或胶囊式导航菜单与父元素等宽。)...锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。...默认情况下，插件把弹出框（popover）设置在顶部。...| object 默认值：10 #data-offset 当计算滚动位置时，距离顶部的偏移像素。

44.3K3 0

独家 | Tableau使用窍门：轻松学会设计仪表板

在菜单中选择“仪表板”（“Dashboard”），然后再选择“显示网格”（“Show Grid”）。就是这么简单。 ? #9 – 设置像素以调整网格尺寸这是一个非常方便的选项。...#8 – 使用移位键（SHIFT）将画布上的对象拖动为浮动对象当将一个新的工作表放入仪表板画布时，你可以按住移位键（SHIFT）的同时在画布上拖动对象，Tableau将随之更改“平铺/浮动”设置。...#1 – 双击仪表板画布中对象的顶部标签以选中容器这是一个简单的小窍门。当选中一个对象时，双击这个对象的顶部标签可以选中容纳这个对象的容器。 ?...注意，这些对象以平铺开始，但是在结束时将会成为浮动对象。 2. 在仪表板底部添加一个空对象。 3. 删除“尺寸”图例。 4. 双击对象的顶部标签以选中容器。 5....使用移位键（SHIFT）将容器设为浮动对象。注意，当你这样操作时，你可以改变容器的大小并且使4个工作表在容器中呈现同等大小。 6. 排版容器以将工作表放在所需的位置（在浮动容器中平铺对象） 7.

2.3K2 0

jQuery

() //跳到div1元素平级的所有兄弟元素 .children('ul') //这些兄弟元素中的ul子元素 .slideUp('fast'); //高度实际高度变换到零来隐藏ul元素例子：层级菜单...> View Code 回到顶部 8.jquery动画通过animate方法可以设置元素某属性值上的动画...+滚动到顶部 <!...在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。...和sessionStorage 1、cookie 存储在本地，容量最大4k，在同源的http请求时携带传递，损耗带宽，可设置访问路径，只有此路径及此路径的子路径才能访问此cookie，在设置的过期时间之前有效

4K2 0

scrollTop()方法

scrollTop设置滚动条用法前提工作中需要做一个点击右侧网元或板卡，左侧topo图滚动到对应位置用到的知识点 scrollTop(),position()，工作环境中用了Jtopo,Ztree...scrollTop定义与用法 scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。 scroll top offset 指的是滚动条相对于其顶部的偏移。...如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。...$(selector).scrollTop(offset) //offset可选 position定义与用法 position() 方法返回匹配元素相对于父元素的位置（偏移）。...只要弄明白，滚动条的获取是相对于其顶部的，就简单多了，加油！

1.2K1 0

HTML笔记

body主体标签 background="设置背景图片" bgproperties="fixed(背景永远跟随鼠标滑动)" bgcolor="设置背景底色" text="设置字体颜色" leftmargin...="距离左边距离的值" topmargin="距离顶部距离的值" 文字标签 align常用属性值 top:文字的中间线在图片上方 middle:文字的中间线在图片中间 bottom:文字的中间线在图片底部...left:图片在文字的左侧 right:图片在文字的右侧 absbottom:文字的底线在图片底部 absmiddle:文字的底线在图片中间 baseline:...="文件域的名称" type="file" size="文件域的长度" maxlength="最多字符数"/> <option value="选项值

1.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭