Question

当您在this one等页面上导航时，您可以立即使用空格键或向上/向下箭头或 PG向上/向下< / kbd>滚动页面，无需先点击页面背景。

如何使以下页面也使用这些键滚动，而无需先点击#left div？（请参阅问题末尾的“实时演示”链接）< / p>

<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>

这是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; }

我试过了：

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

这是live demo。

注意：我没有嵌入SO代码片段（我尝试过），因为当您点击Run时，它不会将焦点放在页面上，因此您无论如何都要点击页面，所以你无法观察我的意思。这与jsfiddle的问题相同。

Answer 1

不确定我是否帮助你。这是一个带有固定标题和固定地图的Codepen。这是通过在标题和地图上使用position: fixed来实现的。

如何使左边的div可以用空格键或向下箭头滚动而不必先点击？

1 个答案: