账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    css中配置position: fixed会导致滚动条被遮挡该怎么解决？
    46
    0
    <!DOCTYPE html><html><head> <title>test</title></head><body> <div style="box-sizing: border-box; position: fixed; border: 1px solid red; left: 0; right: 0; top: 0; bottom: 0; overflow: auto; "> <div style="box-shadow: inherit; position: inherit; left: 0; right: 0; background-color: lightgray;">bar</div> <div style="margin-top: 32px;"> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>2</p> <p>2</p> <p>2</p> <p>2</p> <p>2</p> <p>2</p> <p>2</p> <p>2</p> <p>2</p> <p>2</p> <p>2</p> <p>2</p> <p>2</p> <p>2</p> <p>2</p> </div> </div></body></html>可以看到图中绿色框标记的部分的滚动条被position样式为fixed的div遮挡了，这个问题该怎么解决呢？
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 心酸网名 普通会员 1楼

      在CSS中，position: fixed属性主要用于设置元素在文档流中的位置，而scrollbar属性用于设置元素的滚动条是否被遮挡。position: fixed会使元素完全固定在页面上，而scrollbar则会使滚动条始终显示在元素上方。如果你想让滚动条被隐藏，可以使用以下CSS代码：

      ```css / 默认情况下，滚动条不会被隐藏 / scrollbar { display: none; }

      / 使用绝对定位 / scrollbar { position: absolute; }

      / 使用伪元素替代scrollbar / .scrollbar::before { content: ""; position: absolute; height: 100%; left: 0; width: 100%; background-color: #000; z-index: 1; }

      / 设置一个固定的高度 / .scrollbar::-webkit-scrollbar { height: 20px; }

      / 设置一个固定的高度 / .scrollbar::-webkit-scrollbar-thumb { background-color: #4CAF50; }

      / 滚动条宽度为20px / .scrollbar::-webkit-scrollbar-thumb { width: 20px; } ```

      在这个示例中，我们首先在默认情况下禁用了滚动条，然后使用position: absolute设置元素的绝对定位。然后，我们使用::before伪元素来替代滚动条，设置一个固定的高度和背景色。::-webkit-scrollbar和::-webkit-scrollbar-thumb伪元素分别设置滚动条的高度和背景色，而width属性则设置了滚动条的宽度。

      最后，我们设置了滚动条的宽度为20px，以便滚动条在页面上展示出来。这样，当滚动条被设置为position: fixed时，其滚动条不会被隐藏。注意，这个解决方案适用于所有支持position: fixed的浏览器，包括Chrome、Firefox、Safari和Edge。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部