如何使用空格键或向下箭头使左侧 div 可滚动而无需先单击? [英] How to make the left div scrollable with space bar or down arrow without having to click first?

问题描述

当您在这个之类的页面上导航时，您可以立即使用 SPACE BAR 或 UP/DOWN ARROW 或 PG UP/DOWN 来滚动页面，无需点击首先是页面背景.

如何让下一页也用这些键滚动，而不需要先点击#left div?(见最后的现场演示"链接问题)

<div id="标题"><div id="topleft">LOGO</div><div id="topright">TOPRIGHT</div><div id="topmid">TOPMID</div>
<div id="mapcontainer"><div id="map"></div></div><div id="左"><div id="leftmain"><div id="list">AAa<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<b>br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br></div>

这里是CSS:

* { margin: 0;填充:0；}身体{溢出:隐藏；高度:100%；}#left { height:calc(100% - 60px);宽度:54%；向左飘浮;填充:0 2%；溢出-y:自动；}#mapcontainer { 高度:100%;位置:绝对；左:58%；宽度:42%；}#map { 高度:100%；}#topleft { 浮动:左；宽度:155px；}#topright { 浮动:右；宽度:50%；}#header { 高度:60px;背景色:#eee;}

我试过了:

• 在 #left div 上使用 tabindex="0" 但它不起作用
• 通过使用 $("#left").click() 通过 JavaScript/jQuery 触发对 #left div 的点击，但它也不起作用.

这是一个现场演示.

注意:我没有嵌入 SO 代码片段(我尝试过)，因为当您单击 Run 时，它不会将焦点放在页面上，因此您无论如何都必须单击该页面，所以你无法理解我的意思.jsfiddle 也会有同样的问题.

解决方案

不确定我是否理解正确.这是带有固定标题和固定地图的 Codepen.这是通过在标题和地图上使用 position: fixed 来实现的.

When you navigate on a page like this one, you can immediately use SPACE BAR or UP/DOWN ARROW or PG UP/DOWN to scroll the page, without having to click on the background of the page first.

How to make that the following page also scrolls with these keys, without requiring a click on #left div first? (see "live demo" link at the end of question)

<div id="main">
    <div id="header">
        <div id="topleft">LOGO</div>
        <div id="topright">TOPRIGHT</div>
        <div id="topmid">TOPMID</div>
    </div>

    <div id="mapcontainer"><div id="map"></div></div>

    <div id="left">
        <div id="leftmain">
            <div id="list">AAa<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br></div>
        </div>
    </div>
</div>

Here is the CSS:

* { margin: 0; padding: 0; }
body { overflow: hidden; height: 100%; }
#left { height:calc(100% - 60px); width: 54%; float: left; padding: 0 2%; overflow-y: auto; }
#mapcontainer { height:100%; position: absolute; left: 58%; width: 42%; }
#map { height: 100%; }
#topleft { float: left; width: 155px; }
#topright { float: right; width: 50%; }
#header { height: 60px; background-color: #eee; }

I tried:

• with tabindex="0" on #left div but it doesn't work
• by triggering a click on #left div via JavaScript / jQuery with $("#left").click() but it doesn't work either.

Here is a live demo.

Note: I didn't embed a SO code snippet (I tried) because when you click Run, it doesn't give focus to the page, so you have to click on the page anyway, so you cannot observe what I mean. It would be same problem with a jsfiddle.

解决方案

Not sure if I got you right. Here's a Codepen with fixed header and fixed map. This is achieved by using position: fixed on the header and map.

这篇关于如何使用空格键或向下箭头使左侧 div 可滚动而无需先单击?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！