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. JSPatch 使用

    1.JSPatch 准备 地址:https://github.com/bang590/JSPatch 框架:libz.1.tbd , JavaScriptCore.framework 2.cocosp ...

  2. Html中设置访问页面不在后进行其他页面跳转

    Html中设置访问页面不在后进行其他页面跳转 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  3. Linux中文显示乱码?如何设置centos显示中文

    Linux中文显示乱码?如何设置centos显示中文 怎么设置Linux系统中文语言,这是很多小伙伴在开始使用Linux的时候,都会遇到一个问题,就是终端输入命令回显的时候中文显示乱码.出现这个情况一 ...

  4. Math小计

    20161231 黄金分割比:短/长=长/(短+长)=((根号5)-1)/2 ≍ 0.618 斐波那契数列前后两项的比值存在极限.设其中三个数为a.b.(a+b),则当项数趋于无穷时有a/b=b/(a ...

  5. Apache Shiro 学习记录2

    写完上篇随笔以后(链接).....我也想自己尝试一下写一个Strategy.....Shiro自带了3个Strategy,教程(链接)里作者也给了2个.....我想写个都不一样的策略.....看来看去 ...

  6. SQL语句判断数据库、表、字段是否存在

    from master..sysdatabases where name='TestDB')    print 'TestDB存在'else    print 'TestDB不存在' --判断表[Te ...

  7. 无法执行 FunctionImport“entitys.xx”,因为未将它映射到存储函数。EF

    EF突然报了一个这样的错误: 无法执行 FunctionImport"entitys.xx",因为未将它映射到存储函数.EF 其中xx是存储过程: 可能是因为我在.edmx文件中& ...

  8. ELK 集中日志分析 windows部署实战

    一步步来 1.下载软件 Elasticsearch: https://download.elasticsearch.org/...p/elasticsearch/2.0.0/elasticsearch ...

  9. frp配置

    frps配置 --------------------------------------------------------------------------------------------- ...

  10. 深入浅析JAVA注解

    注解,相信大家都会知道,像@requestMapping,@Resource,@Controller等等的一些注解,大家都用过,那么,他的工具类你用过吗?下面就和大家一起来分享一下注解工具类. 注解的 ...