Javascript 从侧边栏中删除滚动条

我试图模仿我在网站上看到的一个漂亮的滚动条。（您必须在大于955px的屏幕上才能查看侧边栏）但是，我的侧边栏是固定的，如果它在y方向溢出，则会出现一个侧边栏，因此屏幕上有两个滚动条-一个用于侧边栏，另一个用于页面。然而，我不想这样。我希望用户进入侧边栏的底部，然后像在这个webiste上一样自行修复它。下面是我的代码现在的样子

.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%;
  }

---

如果可能的话，有人知道我如何使用香草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";
  }

}

window.addEventListener（“滚动”，DoScroll，false）；
函数doscorl（）{
var sidebar=document.getElementById（'sidebar'）；
var sidebarHeight=document.getElementById（'sidebar'）。offsetHeight；
var winHeight=window.innerHeight；
var offset=侧边栏高度-window.pageYOffset；
如果（偏移量<高度）{
sidebar.style.position=“固定”；
sidebar.style.bottom=0；
}否则{
sidebar.style.position=“静态”；
}
}

这是我的演示

---

另外，我知道

函数的名称有点糟糕，但我有点累了。。。你可以给它起一个更具描述性的名字。
我相信有一种更有效的方法可以做到这一点，但我相信这会让你开始得到你想要的东西。对于本例，假设您的边栏有一个
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";
  }

}

window.addEventListener（“滚动”，DoScroll，false）；
函数doscorl（）{
var sidebar=document.getElementById（'sidebar'）；
var sidebarHeight=document.getElementById（'sidebar'）。offsetHeight；
var winHeight=window.innerHeight；
var offset=侧边栏高度-window.pageYOffset；
如果（偏移量<高度）{
sidebar.style.position=“固定”；
sidebar.style.bottom=0；
}否则{
sidebar.style.position=“静态”；
}
}

这是我的演示

另外，我知道
函数的名称有点糟糕，但我有点累了。。。你可以给它一个更具描述性的名字。
老实说，这是一种奇怪的行为。。。您需要隐藏侧边栏上的溢出，并通过更改包含侧边栏内容的子级的Y位置或边距顶部，以编程方式滚动内容。但是既然SO不是一个免费的编程服务，那就试试吧，发布你迄今为止的尝试（你需要一些JS），然后我们可以帮助解决剩下的问题。老实说，这是一种奇怪的行为。。。您需要隐藏侧边栏上的溢出，并通过更改包含侧边栏内容的子级的Y位置或边距顶部，以编程方式滚动内容。但是既然SO不是一个免费的编程服务，那么就试试吧，发布你迄今为止所尝试的（你需要一些JS），然后我们就可以帮助解决剩下的问题