使用箭头键滚动时，将菜单顶部设置在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元素的中间。
相关·内容
1回答
使用箭头键滚动时，将菜单顶部设置在ul元素的中间
javascript、jquery
我有一个下拉菜单，当您单击输入字段时打开，并在单击向上或向下箭头键时激活所选项目上的蓝色背景。它还会将所选项目保留在顶部，以防止所选内容消失。我想要做的是在用户单击向下箭头键一次后，将“top”固定到菜单的中间，以便当用户向上或向下滚动时，选择位于中间。
我曾尝试将scrollTop()方法一分为二，但似乎无法
浏览 0提问于2017-07-07得票数 0
回答已采纳
3回答
SSIS设计器不记得可见区域
ssis
我在Visual Studio2008和SP1中使用SSIS。
当我加载现有包的设计器时，它总是显示一个空白区域。我必须向下和向右滚动才能看到我的组件，或者使用区域滚动条使它们可见。有没有人知道解决办法来保存包中可见区域的x，y位置？
浏览 0提问于2011-05-23得票数 2
回答已采纳
1回答
如何仅当顶部条被粘贴到顶部时才显示元素？- Zurb Foundation
css、layout、zurb-foundation
我有一个顶部栏菜单，但是当页面加载时，它就在页面中间的某个地方。当我向上滚动时，我将它设置为sticky，这样当我在页面中滚动时，它就会被固定在顶部。我的问题是，如何才能使顶部栏中的某些元素仅在顶部粘贴时才会出现？当它没有粘到顶部时，我想隐
浏览 2提问于2014-05-10得票数 0
回答已采纳
3回答
如何在FF中使用箭头键禁用页面滚动
javascript、scroll、arrow-keys
我正在构建一个包含主题和项目的菜单。每个主题都可以通过单击展开和折叠。我的任务是使用向上和向下箭头键在菜单主题和项目之间移动。我已经这样做了，但问题是，当页面比窗口大时，按箭头键时页面会滚动。我试过使用：若要停止滚动页面，请执行以下操作。因此，例如，当我单击'Topic
浏览 2提问于2010-01-07得票数 3
回答已采纳
2回答
打开时向上滑动的下拉子菜单
javascript、jquery、twitter-bootstrap、drop-down-menu、submenu
我正在构建一个也包含子菜单的长菜单。链接在这里： -将浏览器缩小到768像素以下，以查看移动视图。在下拉菜单中，单击“示例”，您可以查看当前的菜单行为。我正在尝试复制上的行为，当您单击子菜单项时，该菜单项会随着子菜单的展开而滚动到菜单的顶部。例如，缩小窗口，打开窗口，然后单击"Mod
浏览 0提问于2015-09-09得票数 0
1回答
如果div从页面顶部偏移，则添加类。
javascript、jquery
当偏移量从顶部25 is时，我的主菜单将“滚动”类添加到“.mainMenu”中。这很好，但是当用户在页面顶部以外的任何地方刷新页面时，“.scroll”并不是活动的，因此“滚动”样式不适用。用例：
用户在页面顶部，向下滚动，添加“.scroll”类，将白色背景变为黑色。用户在页面中间
浏览 0提问于2019-10-12得票数 0
2回答
Javascript页面滚动位置
javascript、jquery、html
我使用的是JavaScript选项卡式菜单，它会在选择菜单项时加载不同的内容(文本/照片)。但是，当您单击菜单项时，滚动位置会跳到元素(在本例中是照片)的中间或底部，我需要它来显示菜单和照片的顶部。有人可以建议我如何设置它，以保持顶部的固定位置，以
浏览 3提问于2015-09-23得票数 0
3回答
HTML/CSS设计了一个响应性网站。onclick属性不起作用
javascript、html、css
我正试图为一个实践网站创建一个响应性的设计。情况是，下面的菜单图标图像只显示，宽度小于701 px。所以它做的很好。但问题是，当显示菜单图标图像时，屏幕宽度小于701 px时，我单击该图像，什么都不会发生。onclick属性"togglemenu()“似乎不起作用。有人能帮忙吗？这是一个现场：
这里是一个HTML片段。<ul id="menuList">
浏览 4提问于2022-08-01得票数 1
回答已采纳
1回答
如何以编程方式滚动引导下拉菜单
javascript、jquery、twitter-bootstrap、thymeleaf
我正在使用一个引导下拉菜单显示一个大的年表。我需要向下滚动列表，以便<li>元素显示在顶部。dropdown-lg"> <ul<
浏览 0提问于2014-04-16得票数 4
回答已采纳
1回答
导航菜单在表格的td内对齐，无边框
html、css、navigation、alignment、containers
我只是想知道，因为我没有做到这一点，我想知道，如果我得到的导航菜单在宣传框的表格中，并居中在空白区域的顶部，并且在顶部的中心框/td/cell帮助上没有边框会很好，因为它很重要。#navmenu, ul.sub1, ul.sub2 { font-size: 9pt;
ul#navmenu
浏览 6提问于2014-04-20得票数 0
1回答
使用jQuery从元素中获取动态css值
javascript、jquery、html、css
我在项目中使用jScrollPane jQuery插件，可滚动区域有两个列表项元素，单击每个列表项时，需要触发一个位于中间绝对位置的模态框，填充所有的空格。不管怎样，这有点难以解释，但这不是问题所在。问题是，我需要通过jQuery获得负的顶部css值(当它向下滚动时)，我无法使它工作，我尝试使用.css()选择器，但是它总是返回0px，即使源代码中显示的不同。知道
浏览 4提问于2013-10-05得票数 0
2回答
我有一个响应单页网站，其中包含一个特色滑块区加上4个部分的内容。我创建了一个浮动菜单，允许用户导航到每个部分。在页面加载，我想要坐在菜单绝对定位在中间的特色滑块区域的左边。(该菜单仅可用于桌面)
当菜单从页面顶部向下滚动到134 at时，我会将菜单更改为固定的菜单，使其位于与用户查看每个内容部分(内容顶部)相同
浏览 7提问于2014-03-23得票数 0
回答已采纳
2回答
css位置固定菜单，100%高度和偏移量
html、css、fixed
我想在网站左边创建一个菜单。主要的想法是youtube是如何制作的：左边有菜单。您可以打开和关闭它的按钮，是在顶部的酒吧。如果菜单是打开的，则将菜单固定在左侧，并在其中设置一个滚动条。菜单的
浏览 4提问于2015-10-28得票数 1
回答已采纳
2回答
Jquery滚动在页面底部停止
jquery、css、scroll、overflow
我正在使用jquery滚动到页面的各个部分。1">placeholder-1</div>如您所见，我从菜单链接中抓取目标元素的href (#id)并滚动到目标元素。但问题在于，我的目标元素直接转到页面的底部，当页面滚动到最后时，该<e
浏览 0提问于2011-04-15得票数 2
回答已采纳
2回答
JQuery --一个连续滚动导航，只是它不太起作用
jquery、html、css
我试图建立一个永远不会结束的导航窗口--主导航区域中的每个链接都是一个块，有滚动按钮，当你向上滚动时，从顶部滚动的项目被分离并重新连接到底部。同样，如果你向下滚动同样的事情发生反向，底部项目消失，并重新出现在顶部。
我可以通过分离和附加来完成这个工作，但是它缺乏技巧-所以它需要动画。问题是，无论我做什么来动画它会导致菜单本身相当快地混乱。我将每个元素</e
浏览 12提问于2011-06-21得票数 3
回答已采纳
1回答
在溢出DIV中滚动单击
javascript、jquery、html、css
我已经构建了一个移动菜单(.menu-wrap)，其中包含一个链接(#bottom-section)，它在DOM中切换一个子菜单(#support-us-nav)，但是在用户滚动之前它是不可见的。我正在尝试修改我的jQuery，它可以切换子菜单，也可以滚动主菜单，该菜单部分工作。主菜单在单击时向下滚动，但它一直滚动到底部，直到它到达子菜单
浏览 4提问于2017-03-26得票数 0
回答已采纳
1回答
在界面生成器中创建的UIScrollView滚动出视图
uiscrollview、interface-builder、ipad
我试图在屏幕中间创建一个可滚动区域--上面是一些不可滚动的标签，下面是一些不可滚动的按钮，所以我只将界面生成器中的UIScrollView放在了窗口的中间。我将UIScrollView的轮廓设置为iPad的全宽，768像素，约700像素高。我可以在UIScrollView中放置其他UI元素作为它的</e
浏览 2提问于2011-06-29得票数 0
5回答
将ul (无序列表)保持在固定位置
javascript、html、css
我有一个左边的菜单，这是一个用户界面，我希望它在屏幕上是静态的。当我滚动时，完整的菜单应该总是出现。我有没有办法处理这个问题。我尝试设置'position: div；top: 0，left: 0‘，但它移动了ul旁边的div，在ul的顶部。 <div><ul</e
浏览 81提问于2019-06-04得票数 1
1回答
我有一个<UL>，其中包含10个<LI>元素，每个元素都很大(比如200-300px高)。我也有一堆代理这些项目，它们是小的，总是可见的。当用户单击其中一个代理时，我希望滚动<UL>，使相应的<LI>项位于<UL>可见部分的中间(除非它是顶部或底部元素之一)。
我已经看过一些使用
浏览 1提问于2013-07-17得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
云直播
实时音视频活动推荐
腾讯云开发者
