CSS - 在没有固定宽度的div中隐藏滚动条

14 浏览
0 Comments

CSS - 在没有固定宽度的div中隐藏滚动条

我已经阅读了很多关于如何隐藏一个包含滚动条的div的答案,并且尝试了很多代码,但是这些答案都是关于固定大小的div的,解决方法就是在一个包装的div中隐藏滚动条,然后在工作的div中移动(隐藏)滚动条到屏幕外。但是要使其工作,就必须知道div的大小,而我所有的div都是用width:%计算的。

有人能给我一个用CSS隐藏含有滚动条的div的思路吗,看到我正在使用Angular2框架,不想在其中包含javascript/jquery。

HTML:

    * 
    * 
    * 
    * 
    * 
    * 
    * 
    * 
    * 
    * 
    *

CSS:

#stack1 {
  position: absolute;
  width: 100%;
  height: 100px;
  background-color: #000000;
}
#boks3,
#boks1,
#boks2,
#boks4,
#boks5 {
  background-color: #ff3333;
  width: 32%;
  position: absolute;
  margin-left: 33.5%;
  padding: 0px 0px 0px 5px;
  z-index: 3;
  height: 100px;
  text-align: left;
  overflow: auto;
}
#boks1 {
  background-color: #ff6666;
  margin-left: 2%;
  z-index: 1;
  height: 100px;
}
#boks2 {
  background-color: #ff4d4d;
  margin-left: 17%;
  z-index: 2;
  height: 100px;
}
#boks5 {
  background-color: #ff0000;
  margin-left: 65%;
  z-index: 1;
  text-align: right;
  height: 100px;
}
#boks4 {
  background-color: #ff1a1a;
  margin-left: 50%;
  z-index: 2;
  text-align: right;
  height: 100px;
}
#stack1:hover #boks1,
#stack1:hover #boks5 {
  background-color: yellow;
  z-index: 4;
}
#stack2:hover #boks2,
#stack2:hover #boks4 {
  background-color: green;
  z-index: 4;
}

此外,position: absolute;使其与其他类似的问题不同,我感觉。目前我可以隐藏滚动条,但是当我调整浏览器窗口大小时,可以看到它的某些部分突出。

admin 更改状态以发布 2023年5月19日
0

2 答案

0 Comments

为了隐藏滚动条，你可以使用WebKit。所有流行的浏览器除了Firefox都支持这个功能，你需要使用jQuery才能在Firefox中实现这个功能。\n\n只需将以下类添加到您的CSS中：\n\n

#boks3::-webkit-scrollbar { 
    display: none; 
}

\n\n这将隐藏滚动条，但仍允许滚动，以下是示例CodePen。

0
0 Comments

你可以在当前的div外部添加一个包装的div，并使包装的div overflow: hidden。将内部div的宽度更改为 `calc(100% + 20px)`。

例如：

private hideScrollbar(): void {
  this.parentNode = this.el.nativeElement.parentNode;
  this.wrapper = document.createElement('div');
  this.wrapper.style.width = this.el.nativeElement.offsetWidth + 'px';
  this.wrapper.style.height = this.el.nativeElement.offsetHeight + 'px';
  this.wrapper.style.overflow = 'hidden';
  this.el.nativeElement.style.width = 'calc(100% + 20px)';
  this.el.nativeElement.style.height = 'calc(100% + 20px)';
  // set the wrapper as child (instead of the element)
  this.parentNode.replaceChild(this.wrapper, this.el.nativeElement);
  // set element as child of wrapper
  this.wrapper.appendChild(this.el.nativeElement);
}

Scroll

您可以在Angular2-drag-scroll中找到以上代码的更多细节

0