css 遮盖滚动条,鼠标移上显示

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* pc端,遮盖x滚动条 */
      @media (min-width: 768px) {
        .overflow-x-scroll {
          overflow-x: auto;
        }

        .cover-scrollbar-x:has(.overflow-x-scroll) {
          position: relative;
          overflow-x: hidden;
          background-color: white;
        }

        .cover-scrollbar-x > .overflow-x-scroll {
          padding-bottom: 20px;
        }

        /* 遮盖x滚动条 */
        .cover-scrollbar-x:has(.overflow-x-scroll)::after {
          content: '';
          display: block;
          z-index: 1;
          position: absolute;
          width: 100%;
          height: 20px;
          bottom: 0;
          background-color: inherit;
        }

        .cover-scrollbar-x:has(.overflow-x-scroll):hover::after {
          display: none;
        }
      }
    </style>
  </head>
  <body>
    <div class="cover-scrollbar-x">
      <div class="overflow-x-scroll">
        <p style="width: 3000px;">
          css使用 ::after + position: absolute 遮盖滚动条,css使用 ::after + position: absolute 遮盖滚动条,css使用 ::after + position: absolute 遮盖滚动条,css使用 ::after + position: absolute
          遮盖滚动条,css使用 ::after + position: absolute 遮盖滚动条,css使用 ::after + position: absolute 遮盖滚动条,css使用 ::after + position: absolute 遮盖滚动条
        </p>
      </div>
    </div>
  </body>
</html>

需要丰富的效果,可以用 javascript 库 simplebar

相关推荐
EveryPossible3 小时前
终止异步操作
前端·javascript·vue.js
Stringzhua3 小时前
setup函数相关【3】
前端·javascript·vue.js
neon12043 小时前
解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题
前端·javascript·vue.js·canva可画
Sammyyyyy3 小时前
Node.js 做 Web 后端优势为什么这么大?
开发语言·前端·javascript·后端·node.js·servbay
妮妮喔妮4 小时前
Webpack 有哪些特性?构建速度?如何优化?
前端·webpack·node.js
ST.J4 小时前
webpack笔记
前端·笔记·webpack
Baklib梅梅4 小时前
2025 年 8 个最佳网站内容管理系统(CMS)
前端·ruby on rails·前端框架·ruby
IT_陈寒4 小时前
🔥5个必学的JavaScript性能黑科技:让你的网页速度提升300%!
前端·人工智能·后端
Bling_Bling_14 小时前
面试常考:js中 Map和 Object 的区别
开发语言·前端·javascript