css - 实现溢出: hidden without hiding scroll bars的效果

标签 css scrollbar overflow

有没有办法像 overflow: hidden; 那样隐藏内容而不隐藏滚动条?我正在尝试制作一个具有视频背景的网站,并使视频在不同尺寸的屏幕或具有不同纵横比的屏幕上仍能正确显示在屏幕上,有时我需要将一些视频隐藏在屏幕之外。我一直这样做:

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    z-index: 0;
}

但是,我注意到此方法隐藏了浏览器滚动条,在浏览器窗口的右侧创建了一个空间,该空间仅显示滚动条“下方”的视频(通过 隐藏在页面之外) overflow: hidden;),但站点的其余部分不会扩展到该额外空间。仍然可以使用鼠标滚轮滚动,但不会出现该栏。

最佳答案

代替 position:absolute 试试 position:fixed

关于css - 实现溢出: hidden without hiding scroll bars的效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24395294/

相关文章:

html - 位置绝对+滚动

javascript - jQuery 鼠标移出调用 CSS3 动画

javascript - Firefox 的自定义滚动条样式

html - css 网格单元格内容溢出不起作用

html - 如何在 css 中设置两个产品之间的边框?

javascript - 粘性侧边栏 Accordion 无法正确滚动

css - 强制在表格上显示垂直滚动条

jquery - 在 Fancybox 2.1.5 中删除或隐藏垂直滚动条

javascript - 将 td 内容溢出到下一个 td 元素,而不在 HTML 表格中进行替换

html - div 内的 div - 如何自动 averflow 到其余空间?