CSS可以用来隐藏滚动条吗?你会怎么做?
当前回答
将此CSS代码复制到隐藏滚动条的客户代码:
<style>
::-webkit-scrollbar {
display: none;
}
#element::-webkit-scrollbar {
display: none;
}
</style>
其他回答
即使溢出,我的答案也会滚动:隐藏;,使用jQuery:
例如,使用鼠标滚轮水平滚动:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
$(function() {
$("YourSelector").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
</script>
如果你们还感兴趣的话,我想我为你们找到了一个变通办法。这是我的第一个星期,但这对我很有用。。。
<div class="contentScroller">
<div class="content">
</div>
</div>
.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}
我相信您可以使用溢出CSS属性来操作它,但他们的浏览器支持有限。一位消息人士表示,它是Internet Explorer 5(及更高版本)、Firefox 1.5(及更新版本)和Safari 3(及更晚版本)——也许足以满足您的需求。
滚动,滚动,滚动有很好的讨论。
隐藏滚动条的跨浏览器方法。
它在Edge、Chrome、Firefox和Safari上进行了测试
隐藏滚动条,同时仍然可以使用鼠标滚轮滚动!
代码笔
/* Make parent invisible */
#parent {
visibility: hidden;
overflow: scroll;
}
/* Safari and Chrome specific style. Don't need to make parent invisible, because we can style WebKit scrollbars */
#parent:not(*:root) {
visibility: visible;
}
/* Make Safari and Chrome scrollbar invisible */
#parent::-webkit-scrollbar {
visibility: hidden;
}
/* Make the child visible */
#child {
visibility: visible;
}
您可以使用隐藏溢出的包装器div,并将内部div设置为auto来实现这一点。
要删除内部div的滚动条,可以通过对内部div应用负边距将其从外部div的视口中拉出。然后对内部div使用相等的填充,以使内容保持在视图中。
JSFiddle公司
###HTML格式
<div class="hide-scroll">
<div class="viewport">
...
</div>
</div>
###CSS格式
.hide-scroll {
overflow: hidden;
}
.viewport {
overflow: auto;
/* Make sure the inner div is not larger than the container
* so that we have room to scroll.
*/
max-height: 100%;
/* Pick an arbitrary margin/padding that should be bigger
* than the max scrollbar width across the devices that
* you are supporting.
* padding = -margin
*/
margin-right: -100px;
padding-right: 100px;
}
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 是否有'box-shadow-color'属性?
- 在jQuery中的CSS类更改上触发事件
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素,而不占用文档流中的空间
- 禁用身体滚动
- 使用jQuery动画addClass/removeClass
- 在一个CSS宽度的小数点后的位置是尊重?
- 检测输入是否有文本在它使用CSS -在一个页面上,我正在访问和不控制?
- 我怎么能选择一个特定的类的最后一个元素,而不是父里面的最后一个孩子?
- @media screen和(max-width: 1024px)在CSS中是什么意思?
- 我怎么能检查html元素,从DOM消失失去焦点?
- 谷歌Chrome表单自动填充和它的黄色背景