移动端去掉横向滚动条样式

::-webkit-scrollbar{
  width:0;
}
::-webkit-scrollbar-track {
  background:rgba(0,0,0,0);
}

::-webkit-scrollbar-thumb {
  background:rgba(0,0,0,0);
}

::-webkit-scrollbar-thumb:hover {
  background:rgba(0,0,0,0);
}

::-webkit-scrollbar-thumb:window-inactive {
  background:rgba(0,0,0,0);
}

时间: 2024-10-16 05:19:30

移动端去掉横向滚动条样式的相关文章

frame去掉横向滚动条【转】

如题,就是在网页中,只显示右侧的垂直滚动条,而不要底部的水平滚动条:这个问题让我挠头了半天. 做的那个管理界面,为了能让菜单在整个窗口中显示,我没有用Frame,而是用了iFrame:为了让iFrame窗口适用大小,我也用JavaScript代码做了判断: 插入iFrame的代码如下(我没有设宽高,宽高有Js代码控制的,这里不再描述)<iframe src="welcome.html" name="workArea" align="middle&qu

移动端禁用横向滚动条

在用bootstrap制作移动开发的时候,发现宽度并未超过屏幕宽度时,依然出现横向滚动条. 问题解决: 1.查看是否在head里面加入 /*等比例缩放*/<meta name="viewport" content="width=device-width, initial-scale=1.0">/*禁止缩放*/<meta name="viewport" content="initial-scale=1, maximum-

css之超出部分不换行且显示横向滚动条

我不是专业前端,所以折腾了老半天啊QAQ 需求是两个div,内层div不换行且超出时外层div显示横向滚动条 类似以下这种: 刚开始的代码如下: <div class="nowrap"> <div class="item-t"></div> <div class="item-t"></div> <div class="item-t"></div>

chorme和IE下的滚动条样式修改

火狐下的滚动条样式无法去修改,但chorme下的则可以任意修改,惊喜的是IE竟然是最早实现这一功能的浏览器,IE5都能有效果. chorme下的滚动条样式修改: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css&q

CSS3定制滚动条样式 webkit

1 /* 滚动条整体样式外部 滚动条宽度和高度分别代表横竖滚动条的宽度和高度*/ 2 *::-webkit-scrollbar { 3 width: 6px; 4 height: 6px 5 } 6 /* 滚动条里面的上下箭头按钮,允许通过点击微调滚动条的位置 一般隐藏*/ 7 *::-webkit-scrollbar-button { 8 width: 0; 9 height: 0; 10 display: none 11 } 12 /* 滚动条横竖滚动条交汇样式 一般设置透明*/ 13 *:

移动端网页自定义滚动条

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta id="viewport" name="viewport" content="initial-scale=1.0,user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <title&

CSS3自定义滚动条样式 之 -webkit-scrollbar

有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的.当然,兼容所有浏览器的滚动条样式目前是不存在的. 演示 来看看这2个滚动条demo:demo1(图片版).demo2(纯CSS3版) 滚动条组成 ::-webkit-scroll

CSS3自定义滚动条样式 -webkit-scrollbar

http://blog.csdn.net/hanshileiai/article/details/40398177#t1 有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的.当然,兼容所有浏览器的滚动条样式目前是不存在的. 演示

IE6下出现横向滚动条问题的解决方案

当我们在css样式设置为html {overflow-y:auto;}时,在ie7以上版本应用时不会有问题,可是在ie6下就会发现垂直滚动条出现会引起横向滚动条出现.究其原因是在ie6下,当内容过多出现垂直滚动条时,此时页面的宽度为其本来宽度加上滚动条的宽度,导致页面宽度超过100%,而出现横向滚动条,在ie7+浏览器中,会自动的识别滚动条,页面宽度为内容的宽度加上滚动条的宽度等于100%,而不会出现滚动条,这相当于是ie的滚动条bug(纯属个人见解,不对的地方还请指出,共同学习交流). 解决上