精华内容
下载资源
问答
  • 移动端移动端页面只要兼容 Chrome 和 Safari 就够了,所以可以使用自定义滚动条的伪类选择器 ::-webkit-scrollbar 来隐藏滚动条。.container::-webkit-scrollbar {display: none;}(推荐教程:CSS教程)PC 端PC 端对...

    c82dd3f47b2f3ce698d0cc12db947676.png

    移动端

    移动端页面只要兼容 Chrome 和 Safari 就够了,所以可以使用自定义滚动条的伪类选择器 ::-webkit-scrollbar 来隐藏滚动条。.container::-webkit-scrollbar {

    display: none;

    }

    (推荐教程:CSS教程)

    PC 端

    PC 端对兼容性的要求相对来说要高一点,所有可以换一种方法,大致思路就是在内容div外面包一个父容器div,设置 overflow: hidden,内容div设置 display-x: hidden; display-y: auto; 最后设置父容器div的宽度小于内容div的宽度或者设置内容div的 margin-right 为负值就可以了。

    1111

    222

    333

    444

    .outer {

    width: 300px;

    height: 300px;

    overflow: hidden;

    .content {

    width: 330px;

    /*margin-right: -15px;*/

    height: 100%;

    overflow-x: hidden;

    overflow-y: auto;

    background: red;

    padding-top: 100px;

    p:not(:first-child) {

    margin-top: 100px;

    }

    }

    }

    相关视频教程推荐:css视频教程

    展开全文
  • 解决火狐浏览隐藏不了滚动条问题1.里层容器的width多17px,外层容器溢出隐藏,能兼容各个浏览器.outContainer {width:350px;height:300px;overflow: hidden;}.inContainer {height:300px;width: 367px;overflow-x:...

    解决火狐浏览隐藏不了滚动条问题

    1.里层容器的width多17px,外层容器溢出隐藏,能兼容各个浏览器

    .outContainer {

    width:350px;

    height:300px;

    overflow: hidden;

    }

    .inContainer {

    height:300px;

    width: 367px;

    overflow-x:hidden;

    overflow-y:scroll;

    }

    2.设置 scrollbar-width: none,可兼容

    .outContainer {

    width:350px;

    height:300px;

    overflow: hidden;

    }

    .inContainer {

    height:300px;

    width: 350px;

    overflow-x:hidden;

    overflow-y:scroll;

    scrollbar-width: none;

    }

    /* 使用伪类选择器 ::-webkit-scrollbar ,兼容chrome和safari浏览器 */

    .inContainer::-webkit-scrollbar{

    display: none;

    }

    /*兼容火狐*/

    .inContainer {

    scrollbar-width: none;

    }

    /* 兼容IE10+ */

    .inContainer {

    -ms-overflow-style: none;

    }

    html如下

    展开全文
  • 当我们打开第一个网页的时候,浏览器都会显示横向、纵向的滚动条,如果不想要某一方向上的滚动条,可以用CSS将其隐藏掉,代码也是很简单的,在CSS只需定义一句便可:/*CSS代码:隐藏横向滚动条*/html{overflow:auto;...

    当我们打开第一个网页的时候,浏览器都会显示横向、纵向的滚动条,如果不想要某一方向上的滚动条,可以用CSS将其隐藏掉,代码也是很简单的,在CSS只需定义一句便可:/*CSS代码:隐藏横向滚动条*/

    html{overflow: auto; overflow-x:hidden}

    /*CSS代码:隐藏纵向滚动条*/

    html{overflow: auto; overflow-y:hidden}

    /*FF、谷歌,Oprea都兼容,但要支持IE6~9,HTML头部定义需要这样,您可以复制下面的代码替换掉你的HTML头部: html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  */

    这种方法实际上是通过隐藏超出某个方向上的内容,滚动条也自然就不显示了。不过还有一种方法,是强制不显示网页滚动条,只需在Body区添加一句代码即可,如下:

    还可以选择在不需要时隐藏:

    还有一种CSS方法,将横向、竖向滚动条都隐藏掉:

    html {

    overflow-x:hidden;

    overflow-y:hidden;

    }

    根据你的实际情况选用吧,估计会有适合你的方法。

    展开全文
  • 隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,下面我们来看一下使用css隐藏滚动条的方法。可以使用自定义滚动条的伪...

    隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,下面我们来看一下使用css隐藏滚动条的方法。

    71fb7ca26e43225d114238f0539346cd.png

    可以使用自定义滚动条的伪对象选择器::-webkit-scrollbar设置隐藏滚动条。

    使用此伪类选择器隐藏滚动条css代码:.element::-webkit-scrollbar {display:none}

    如果要兼容 PC 其他浏览器(IE、Firefox 等),可以使用以下方法。在容器外面再嵌套一层 overflow:hidden 内部内容再限制尺寸和外部嵌套层一样,就变相隐藏了。

    ......

    css代码:.outer-container,.content {

    width: 200px;

    height: 200px;

    }

    .outer-container {

    position: relative;

    overflow: hidden;

    }

    .inner-container {

    position: absolute;

    left: 0;

    overflow-x: hidden;

    overflow-y: scroll;

    }

    /* for Chrome */

    .inner-container::-webkit-scrollbar {

    display: none;

    }

    展开全文
  • css隐藏滚动条兼容

    2021-08-04 11:30:47
    css隐藏滚动条 .scrollbar{ scrollbar-width: none; -ms-overflow-style: none; } .scrollbar::-webkit-scrollbar { display: none; }
  • scrollbar-width:none(火狐) -ms-overflow-style:none(ie) overflow:hidden(其他)
  • CSS中,隐藏滚动条的同时还支持滚动是可以实现的,而且方法也有不少。下面分享三种CSS滚动条隐藏并可以滚动的方法。方法1:计算滚动条宽度并隐藏起来实例下面给一个简化版的代码.......outer-container {width:360...
  • css隐藏滚动条

    千次阅读 2019-06-17 10:22:30
    同时该文章还分享了一种通过CSS隐藏滚动条的方法,不过这个方法不兼容IE,做移动端的可以使用。 那就是自定义滚动条的伪对象选择器::-webkit-scrollbar,详情请看之前的文章:CSS3自定义webkit滚动条样式 chrome 和...
  • 但是为了美观我们会隐藏滚动条还需要支持滚动,最容易的办法就是使用iscroll插件来实现,但这不是我们想要的,细想一下,现在css其实就可以实现这个功能,经过我深思熟虑后,想到了3中比较好的方法,亲测可以使用,...
  • css隐藏滚动条兼容ie和chrome

    千次阅读 2017-07-20 18:17:36
    隐藏滚动条
  • 时至今日,还没有任何一条CSS规则可以使元素可以隐藏滚动条的同时依然可以滚动内容,只能通过针对特定浏览器设置滚动条样式来实现。 Firefox浏览器 对于 Firefox ,我们可以将滚动条宽度设置为none: scrollbar-...
  • CSS实现滚动条隐藏

    千次阅读 2018-04-03 15:52:59
    CSS如何实现隐藏滚动条兼容IE、 Firefox浏览器<div class="first"> <div class="second"> <div class="content"> ..
  • 今天项目中要实现一个功能,后台系统的左侧要固定,并且超出屏幕高度可以滚动,为了美观,要求隐藏左侧滚动条,对于谷歌直接用css来控制就好了--->.left-bar::-webkit-scrollbar {display: none;}来说很好做到,...
  • CSS隐藏滚动条兼容各大浏览器。

    千次阅读 2019-11-15 09:51:08
    1:滚动条宽约17px,设置其width多17px,外层容器溢出隐藏,能兼容各个浏览器 .outContainer {  width:350px;  height:300px;  overflow: hidden; } .inContainer { height:300px; width: 367px; overflow-x:...
  • CSS隐藏滚动条

    千次阅读 2018-12-10 17:31:53
    CSS隐藏滚动条 横向滑动/滚动隐藏滚动条 简介 移动端浏览器将页面的滚动条自动隐藏,同时又保证页面可以滚动,用户可以手动上下翻。 PC端浏览器不会将页面的滚动条自动隐藏,在出现横向滚动条时候有可能会覆盖内容...
  • css完美解决隐藏滚动条能滚动,兼容火狐Firefox、谷歌,Edge,38号技师亲测能用 前几天项目需求要做到表格能滚动,但是要隐藏滚动条,Chrome没啥问题,百度一下就出来了,但是还要兼容火狐,查了各种方法都没有效果...
  • 实现css不显示浏览器滚动轴并且能够兼容ie8浏览器发布时间:2019-07-31编辑:星王原创阅读(475)实现隐藏浏览器滚动轴的方法,并且能够兼容ie8,和js操作显示和隐藏滚动条css 设置 //兼容ie8img{width: 100%;height...
  • 隐藏滚动条css3样式

    2018-01-23 16:07:00
    要使三大浏览器都可以兼容到,我也在看着大神的代码尝试一下 html { overflow: -moz-hidden-unscrollable; height: 100%; } body::-webkit-scrollbar { display: none; } body { -ms-overflow-style: none; ...
  • 话不多说,上代码 ...<div class="scrollbar"> <div class="content">...css代码如下: .scrollbar{ height:100vh; overflow-y:auto; -ms-overflow-style:none; //兼容Edge } //chrome需要使用伪类
  • 项目中,页面效果需要展示一个页面的移动端效果,使用的是一个苹果手机样式背景图,咋也没用过苹果,咋也不敢形容。 如下图所示: ...但不兼容火狐,让人脑瓜疼的火狐啊,下面小方法解决火狐隐藏滚动条...
  • 1 隐藏滚动条 .diTuPage::-webkit-scrollbar { width: 0 !important } .diTuPage { -ms-overflow-style: none; } .diTuPage { overflow: -moz-scrollbars-none; } 2 ios中长按不选中页面内容 *{ -webkit-...
  • 1.width多17px,外层容器溢出隐藏,能兼容各个浏览器。 .outContainer {  width:350px;  height:300px;  overflow: hidden; } .inContainer { height:300px; width: 367px; overflow-x:hidden; overflow-y:...
  • 隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法。 方法1:计算滚动条...
  • 方法一, 利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE <!DOCTYPE html> <html> <head>...超出部分隐藏滚动条</title> </head> <s...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,994
精华内容 6,797
关键字:

兼容滚动条隐藏css