demo1:

html

<div class="outer-container">
<div class="inner-container">
<div class="content">
......
</div>
</div>
</div>

 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;
}

  demo2

直接在css中用伪属性

::-webkit-scrollbar
.element::-webkit-scrollbar {display:none}

  

 

css实现隐藏滚动条的更多相关文章

  1. CSS 实现隐藏滚动条同时又可以滚动(转)

    CSS 实现隐藏滚动条同时又可以滚动 移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动? 使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚 ...

  2. 前端切图:CSS实现隐藏滚动条同时又可以滚动

    CSS 实现隐藏滚动条同时又可以滚动 原始功能: 图片发自简书App 添加伪类之后的功能: 图片发自简书App 完整demo如下: <!DOCTYPE html> <html> ...

  3. 纯css实现隐藏滚动条仍可以滚动

    移动端弹出层加了滚动条之后,滚动条一直在,有些不美观,overflow:hidden;虽然可以隐藏滚动条,但是不能滚动.需要实现隐藏滚动条但是仍可以滚动,js实现太麻烦,直接将滚动条隐藏会更好一些. ...

  4. CSS怎么隐藏滚动条(三种方法)

    xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transi ...

  5. CSS实现隐藏滚动条并可以滚动内容

    方法一: 计算滚动条宽度并隐藏起来,其实我只是把滚动条通过定位把它隐藏了起来,下面给一个简化版的代码: <div class="outer-container"> &l ...

  6. CSS 实现隐藏滚动条同时又可以滚动

    方法1: 利用 css 3 的新特性  -webkit-scrollbar, 但是这种方式只兼容chrome,不兼容 火狐 和 IE. /* for Chrome */ .content::-webk ...

  7. css 如何隐藏滚动条

    原理: 把滚动条设为完全透明: /* 设置滚动条的样式 */::-webkit-scrollbar { width: 12px;} /* 滚动槽 */::-webkit-scrollbar-track ...

  8. 纯css实现移动端横向滑动列表&&overflow:atuo;隐藏滚动条

    <!DOCTYPE html> <html> <head> <title>横向滑动</title> <style type=" ...

  9. 前端福利之overflow-scrol 怎么隐藏滚动条(转)

    最近用vue写wap站的时候遇到了微信打开页面滚动条无法隐藏的问题. 对于隐藏滚动条,我们最常用的方法首先是: 1.使用以下CSS可以隐藏滚动条: .container::-webkit-scroll ...

随机推荐

  1. 认真研究一下Gradients css3(无聊笔记)(原)

    渐变(gradients)分为2种: 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向 径向渐变(Radial Gradients)- 由它们的中心定义 红色框表示可重 ...

  2. JAVA发展史

    1990年年末,Sun 公司预料嵌入式系统在未来家用电器领域大显身手,于是Sun公司成立了一个由James Gosling 领导的"Gren计划"(由于C++和可用的API在某些方 ...

  3. Theano printing

    Theano printing To visualize the internal relation graph of theano variables. Installing conda insta ...

  4. form表单练习

    注册页面的设计 <body leftmargin="400px" topmargin="200px"> <form method=" ...

  5. FORM

    一 .新增的input输入属性 1.email类型 在表单提交E-mail地址时,无效的输入会生成很多无效数据,对后期的数据检索造成一定的影响.所以在表单提交之前,需要对输入的E-mail地址进行有效 ...

  6. SQL拼接自己需要的字符串

    SQL行转列有多种写法,如果想把多行数据拼接成为新的一行,比如: 首先,将查询转为XML 替换XML的标签 将第一个字符,去掉试用 STUFF函数 sql STUFF用法 1.作用 删除指定长度的字符 ...

  7. HttpContext.Cache属性

    HttpContext基于HttpApplication的处理管道,由于HttpContext对象贯穿整个处理过程,所以,可以从HttpApplication处理管道的前端将状态数据传递到管道的后端, ...

  8. SPSS课程学习思路及流程

    数据挖掘领域对行的分析

  9. TCP学习之五:客户端、服务端异步传输字符串

    参考学习张子阳大神的博客:http://www.cnblogs.com/JimmyZhang/category/101698.html 消息发送接口: 消息接收接口: 客户端: 服务端: 消息发送类: ...

  10. protobuf编译出错的解决方案(iOS,OSX)

    protobuf 最近使用protobuf,变编译工具时遇上一点问题.现在附上解决方案 编译过程 完全参照 https://github.com/alexeyxo/protobuf-objc 编译出错 ...