独立滚动div打破页面向上/向下

Question

我希望你能指出我正确的方向。

我有一个由两个div组成的网页设计 - 侧边栏和主要内容区域。每个单独使用CSS单独向上/向下滚动。我已经在几个关键的浏览器中对它进行了测试，并且显示效果很好。在启用触摸的设备和鼠标上，它都按预期滚动。

页面上/下按钮在页面初始加载时不起作用，这可能看起来微不足道，但我对此并不满意。如果用户单击/点击他们想要滚动的div，则页面向上/向下按钮可以工作。

我对进入的方向感到有点困惑，需要就我最适合的时间提出建议：

• 寻求修复＆＃39;在我现有的CSS
上
• 创建div：悬停规则
• 探索Javascript以创建默认＆＃39;焦点＆＃39; ＃right-block的状态？

我不确定它是否是一个“焦点”，一个＆＃39;焦点＆＃39;问题，或其他什么，所以有些人可能就是我所需要的。

希望一切都清楚。谢谢。代码如下：

HTML：

<div id="page-wrap"> <div id="left-block"></div> <div id="right-block"></div> </div>

CSS：

body {
    overflow-x: hidden;
}
#page-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    height: 100vh;
    overflow: hidden;
    position: relative;
    width: 100%;
    will-change: overflow;
}
#left-block, #right-block {
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    overflow: auto;
    height: auto;
}
#left-block {
    float: left;
    padding-bottom:6em;
    width: 260px;
}
#right-block {
    width: calc(100% - 260px);
}
#left-block::-webkit-scrollbar {
    display: none;
}