首页 > 解决方案 > 默认情况下使用空格键使主体内的容器可滚动

问题描述

我的代码中有以下标记:

<html>
    <body>
        <div class="page">
            <div class="content">
                ...
            </div>
        </div>
    </body>
</html>

在我的 CSS 代码中,我有以下内容:

html,
body {
    position: absolute;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
}
.page {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    overflow: auto;
}

虽然这看起来有点奇怪,但它为我的应用程序解决了一些关键问题。无论如何,这个想法是.content容器是容纳溢出内容的容器。无论如何,当页面第一次加载时,很多用户更喜欢使用空格键来滚动。由于正文不可滚动,因此没有任何反应。

如何更改空格键的目标.content以默认滚动容器而不是正文?我尝试了以下方法:

document.activeElement = document.getElementsByClassName("content")[0]

然而,这并没有奏效。谢谢你的帮助。

标签: javascripthtml

解决方案


这是您的解决方案:

对于 CSS:

html,body 
{
   position: absolute;
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
   left: 0;
   top: 0;
   overflow: hidden; // i changed this line
}
.page {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    overflow: scroll; // i changed this line
} 

对于 JavaScript:

 // you can use getElementById if your element is unique in the page.
 let container = document.getElementsByClassName('content')[0];
     container.scrollTop = 40; // to set how much pixels you have to scroll
     window.addEventListener('keydown',function(e){ 
            e.preventDefault(); // to prevent the default spacebar event.
            if(e.code === 'Space'){
               container.scrollBy(0,container.scrollTop);
             }
      });

推荐阅读