css隐藏右侧滚动条但是还能继续滚动

css隐藏右侧滚动条但是还能继续滚动：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .outer-container {
      width: 360px;
      height: 200px;
      position: relative;
      overflow: hidden;
      background-color: aqua;
    }

    .inner-container {
      position: absolute;
      left: 0;
      top: 0;
      right: -17px;
      bottom: 0;
      overflow-x: hidden;
      overflow-y: scroll;
    }
  </style>
</head>

<body>
  <div class="outer-container">
    <div class="inner-container">
      编写 JSX 语法的标签
      你在前面看到的标记语言（markup syntax）称为 JSX。JSX 不是必须要用的，但是因为使用方便，所以大多数 React 项目都使用 JSX。所有 我们推荐的用于本地开发的工具 都自带对 JSX 的支持。
      JSX 的语法比 HTML 更严格。类似 <br /> 这样的标签是必须要关闭的。并且，组件也不能返回多个并列最高层级的 JSX 标签，你必须为所有最高层级的标签添加一个共同的父标签，例如使用 <div>...</div> 或
      <>...</> 作为父标签：
      SX 允许你将标签语言混入到 JavaScript 代码中。通过花括号可以让你在标签语言中输出 JavaScript 变量，并将其展示给用户。
    </div>
</body>

</html>

效果：

还有一种方式：

父级设置overflow: hidden;
子元素设置宽度比父级宽一点，把滚动条撑出去。