CSS隐藏滚动条，但使元素可滚动。

14 浏览
0 Comments

CSS隐藏滚动条，但使元素可滚动。

我有一个名为items的元素，元素内的内容比元素的高度长，我想使其可滚动，但隐藏滚动条，该如何实现？\n

\n

.left-side {
    height: 878px;
    padding-top: 20px;
    width: 1470px;
}

\n我尝试将left-side类的overflow设置为auto，但没有任何效果。

0

3 答案

0 Comments

CSS hide scroll bar, but have element scrollable的问题是如何隐藏整个网页的滚动条，但保持某个元素仍然可以滚动的。通过上面的内容，可以得出以下结论：

问题的原因：为了隐藏整个网页的滚动条，需要使用CSS样式来控制滚动条的显示与隐藏。然而，不同的浏览器对滚动条的样式和属性有不同的支持，因此需要分别针对不同的浏览器设置样式。

解决方法：为了实现隐藏整个网页的滚动条，但保持某个元素可滚动，可以使用以下CSS样式：

对于Chrome、Safari和Opera浏览器，可以使用以下样式来隐藏滚动条：

/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
  display: none;
}

对于IE和Edge浏览器，可以使用以下样式来隐藏滚动条：

/* Hide scrollbar for IE and Edge */
html {
  -ms-overflow-style: none;  /* IE and Edge */
}

对于Firefox浏览器，可以使用以下样式来隐藏滚动条：

/* Hide scrollbar for Firefox */
html {
  scrollbar-width: none;  /* Firefox */
}

通过以上的CSS样式，可以实现隐藏整个网页的滚动条，但保持某个元素仍然可以滚动。这样可以在需要的时候，对指定的元素进行滚动操作，而不会影响整个网页的滚动。

0
0 Comments

CSS隐藏滚动条，但使元素可滚动的原因是为了在现代浏览器上实现这一效果。解决方法是添加CSS类`.disable-scrollbars`到要应用该效果的元素中。以下是CSS代码和使用SCSS/SASS的代码示例：

CSS代码：

.disable-scrollbars::-webkit-scrollbar {
  background: transparent; /* Chrome/Safari/Webkit */
  width: 0px;
}
.disable-scrollbars {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}

SCSS/SASS代码：

.disable-scrollbars {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
  &::-webkit-scrollbar {
    background: transparent; /* Chrome/Safari/Webkit */
    width: 0px;
  }
}

如果要应用此规则到所有子元素，可以使用`.disable-scrollbars *`和`.disable-scrollbars *::-webkit-scrollbar`。同时，在`width`旁边添加`height: 0;`以捕获水平滚动条。

0
0 Comments

CSS隐藏滚动条，但使元素可滚动的问题出现的原因是想要隐藏网页中的滚动条，但仍然希望能够滚动内容。为了解决这个问题，可以使用以下CSS代码：

html {
  overflow: scroll;
}
::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* 使滚动条透明 */
}

这段代码中，`html`元素的`overflow`属性被设置为`scroll`，这样可以强制显示滚动条。然后，使用`::-webkit-scrollbar`选择器来定义滚动条的样式，将宽度设置为0px并将背景设置为透明，这样就可以隐藏滚动条。

要了解更多信息，可以参考以下链接：Hide scroll bar, but while still being able to scroll。

然而，尽管可以隐藏滚动条，但这会导致用户体验非常差。关于滚动条的完整参考资料可以在css-tricks.com/almanac/properties/s/scrollbar找到。

还需要注意的是，上述方法只适用于桌面版的Chrome浏览器，不适用于其他浏览器，如Firefox和IE。

有人问到为什么需要使用`background: transparent;`，难道`width: 0;`不足够吗？对于水平滚动条，设置`height: 0;`就足够了。

确实，`width: 0;`足以隐藏垂直滚动条，而`height: 0;`足以隐藏水平滚动条。

另外，使用`::-webkit-scrollbar {display: none;}`也可以隐藏滚动条，这种方法更好。

有些人认为，如果他们无法想象出使用滚动条的场景，那么滚动条就没有用处。这是一种经典的误解。

总之，通过上述方法可以隐藏滚动条，但需要注意它可能会影响用户体验，所以在使用时需要谨慎考虑。

0