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。

加载window后，您可以添加EventListener来调用function来检查元素偏移量。你可以从那里拿走它：

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。

P.S。我知道function的名字很糟糕，但有点烧焦......你可以给它一个更具描述性的名字。

从侧栏删除滚动条

1 个答案: