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

相关推荐
脑花儿22 分钟前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
lumi.1 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰1 小时前
vue核心原理实现
前端·javascript·vue.js
影子信息1 小时前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js
卷Java2 小时前
CSS模板语法修复总结
java·前端·css·数据库·微信小程序·uni-app·springboot
gihigo19983 小时前
在CentOS上配置SVN至Web目录的自动同步
前端·svn·centos
珍宝商店3 小时前
优雅的 async/await 错误处理模式指南
开发语言·前端·javascript
excel3 小时前
楖览:Vue3 源码研究导读
前端
proud12123 小时前
开源的 CSS 动画库
前端·css·开源
折翼的恶魔3 小时前
HTML媒体标签
前端·html