我正在尝试模仿我在网站 https://doughellmann.com/blog/ 上看到的一个漂亮的滚动条。 (您必须在大于 955px 的屏幕上才能查看侧边栏)但是,我的侧边栏是固定的,如果它在 y 方向溢出,则会出现侧边栏,因此屏幕上有两个滚动条 - 一个用于侧边栏,另一个用于侧边栏对于页面。然而,我不想要这样。我希望用户转到侧边栏的底部,然后像在该网站上那样自行修复。这是我的代码现在的样子
.sidebar{
display: block;
background-color: #1056b1;
width: 30%;
height: 100%;
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
overflow-y: scroll;
}
.content-on-the-right{
margin-left: 31%;
}
有谁知道我如何使用vanilla javascript或reactjs甚至css(如果可能的话)解决这个问题?
最佳答案
我确信有一种更有效的方法可以做到这一点,但我相信这会让您开始获得您想要的东西。对于此示例,假设您的侧边栏的 id
为 sidebar
。
当窗口
加载时,您可以添加一个EventListener
来调用一个函数
来检查元素偏移量。您可以从那里获取它:
window.addEventListener("scroll", DoScroll, false);
function DoScroll() {
var sidebar = document.getElementById('sidebar');
var sidebarHeight = document.getElementById('sidebar').offsetHeight;
var winHeight = window.innerHeight;
var offset = sidebarHeight - window.pageYOffset;
if (offset < winHeight) {
sidebar.style.position = "fixed";
sidebar.style.bottom = 0;
} else {
sidebar.style.position = "static";
}
}
这是我的 JSFiddle演示了这个。
附注我知道函数
的名称有点糟糕,但我有点精疲力竭......你可以给它一个更具描述性的名称。
关于javascript - 从侧边栏删除滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45362249/