javascript - 从侧边栏删除滚动条

Question

我正在尝试模仿我在网站 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(如果可能的话)解决这个问题？

Answer 1

我确信有一种更有效的方法可以做到这一点，但我相信这会让您开始获得您想要的东西。对于此示例，假设您的侧边栏的 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演示了这个。

附注我知道函数的名称有点糟糕，但我有点精疲力竭......你可以给它一个更具描述性的名称。