CSS可以用来隐藏滚动条吗?你会怎么做?


当前回答

我相信您可以使用溢出CSS属性来操作它,但他们的浏览器支持有限。一位消息人士表示,它是Internet Explorer 5(及更高版本)、Firefox 1.5(及更新版本)和Safari 3(及更晚版本)——也许足以满足您的需求。

滚动,滚动,滚动有很好的讨论。

其他回答

要禁用垂直滚动条,只需添加overflow-y:hidden;。

了解更多信息:溢出。

如果您正在寻找隐藏移动设备滚动条的解决方案,请遵循Peter的答案!

这里有一个jsfiddle,它使用下面的解决方案隐藏水平滚动条。

.scroll-wrapper{
    overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
}

它在搭载Android 4.0.4的三星平板电脑(冰淇淋三明治,在本机浏览器和Chrome浏览器中)和搭载iOS 6的iPad(在Safari和Chrome浏览器)上进行了测试。

CSS可以用来隐藏滚动条吗?你会怎么做?

如果要从浏览器视口中删除垂直(和水平)滚动条,请添加:

style="position: fixed;"

到<body>元素。


Java脚本:

document.body.style.position = 'fixed';

CSS:

body {
  position: fixed;
}

使用CSS溢出属性:

.noscroll {
  width: 150px;
  height: 150px;
  overflow: auto; /* Or hidden, or visible */
}

以下是更多示例:

溢出-x,溢出-y测试CSS溢出属性

如果您希望滚动工作,在隐藏滚动条之前,请考虑设置样式他们现代版本的OS X和移动操作系统具有滚动条,而不适合用鼠标抓取,非常漂亮和中性。

为了隐藏滚动条,约翰·库尔拉克(John Kurlak)的一项技术很好,除了离开没有触摸板无法滚动的Firefox用户,除非他们有一只带轮子的老鼠,他们可能会这样做,但即使这样,他们通常也可以仅垂直滚动。

John的技术使用三个元素:

屏蔽滚动条的外部元素。具有滚动条的中间元素。以及一个内容元素,既可以设置中间元素的大小它有滚动条。

必须可以将外部元素和内容元素的大小设置为相同这消除了使用百分比,但我想不出其他什么用正确的调整是行不通的。

我最担心的是是否所有版本的浏览器都设置了滚动条可见溢出内容可见。我已经在当前浏览器中进行了测试,但是而不是更老的。

请原谅我的SASS;P

%size {
    // set width and height
}

.outer {
    // mask scrollbars of child
    overflow: hidden;
    // set mask size
    @extend %size;
    // has absolutely positioned child
    position: relative;
}

.middle {
    // always have scrollbars.
    // don't use auto, it leaves vertical scrollbar showing
    overflow: scroll;
    // without absolute, the vertical scrollbar shows
    position: absolute;
}
// prevent text selection from revealing scrollbar, which it only does on
// some webkit based browsers.
.middle::-webkit-scrollbar {
    display: none;
}

.content {
    // push scrollbars behind mask
    @extend %size;
}

测试

OS X为10.6.8。Windows是Windows 7。

Firefox 32.0隐藏滚动条。箭头键不会滚动,即使在单击聚焦后,但鼠标滚轮和触摸板上的两个手指可以操作OS X和Windows。铬37.0隐藏滚动条。单击以聚焦后,箭头键起作用。鼠标滚轮和轨迹板工作。OS X和Windows。Internet Explorer 11隐藏滚动条。单击以聚焦后,箭头键起作用。鼠标滚轮作品窗户。Safari 5.1.10隐藏滚动条。单击以聚焦后,箭头键起作用。鼠标滚轮和轨迹板工作。操作系统X。Android 4.4.4和4.1.2。隐藏滚动条。触摸滚动工作。在Chrome 37.0、Firefox中试用32.0和4.4.4上的HTMLViewer(无论是什么)。在HTMLViewer中,页面是屏蔽内容的大小,也可以滚动!滚动与页面缩放进行可接受的交互。