css 隐藏滚动条-窗口中文本，图片移动PC端

站长

2024年04月14日 19:59 · 阅读数 34

使用 CSS 隐藏滚动条，如果直接使用 overflow: hidden 会导致内容不能滚动，要想使用 css 隐藏滚动条，但不影响内容滚动，这里有两种方法：

使用 padding 把滚动条移出浏览器视口。
使用 ::webkit-scrollbar 伪元素选择器。

下面分别来看一下这两种方法。

隐藏滚动条

要仅隐藏垂直滚动条，或仅隐藏水平滚动条，请使用 overflow-y 或 overflow-x:

实例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>在网页上隐藏滚动条</title>
<style>
    body {  
  overflow-y: hidden; /* 隐藏垂直滚动条 */  
  overflow-x: hidden; /* 隐藏水平滚动条 */  
}
</style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus.</p>
</body>
</html>

或者，您可以通过将 overflow-x 属性设置为 hidden 来隐藏水平滚动条，通过将 overflow-y 属性设置为 hidden 来隐藏垂直滚动条。

隐藏滚动条但保留功能

使用 padding

使用 css padding 来隐藏滚动条的原理是，把右侧 padding 间距设置为和操作系统滚动条宽度一样的数值，把滚动条挤出浏览器外，这样滚动条就不会出现在浏览器右侧了，并且也不会影响内容滚动。

我们先把 body 的滚动条隐藏，这样就不会有横向的滚动条了。
然后把 main 元素的 overflow-y 设置为 scroll，让它可以垂直滚动。
再把 main 元素的右侧间距 padding-right 设置为滚动条的宽度，这个根据操作系统会有不同。

body {
  overflow: hidden;
}

conten {
  width: 100vw;
  height: 100vh;
  /* overflow-y 设置为 scroll，让它可以垂直滚动 */  
  overflow-y: scroll;
  /*把 main 元素的右侧间距 padding-right 设置为滚动条的宽度 */
  padding-right: 7px;
}

使用 ::webkit-scrollbar

第 2 种方式是使用 ::webkit-scrollbar 伪元素选择器，不过这个选择器只在 webkit 核心的浏览器中有效，例如 Chrome、新 Edge、Safari 等。::web-kit-scrollbar 可以直接选择滚动条元素，把它的 display 属性设置为 none 就可以隐藏滚动条了：

要隐藏滚动条，但仍能保持滚动，可以使用以下代码：

实例



/* 隐藏 Chrome、Safari 和 Opera 的滚动条 */  
.example::-webkit-scrollbar {  
  display: none;  
}  
  
/* 隐藏 IE、Edge 和 Firefox 的滚动条 */  
.example {  
  -ms-overflow-style: none;  /* IE and Edge */  
  scrollbar-width: none;  /* Firefox */  
}

预览：

可以看到这两种效果。

css 隐藏滚动条-窗口中文本，图片移动PC端

转载自:https://juejin.cn/post/7330295665866670132