以前对某个模块增加无滚动条的滚动效果,还需要找个插件才能实现,现在发现个简单方法,用普通的CSS就可以实现。

此方法只适用于不显示滚动条的滚动效果,如果需要自定义滚动条样式,还是需要插件来实现。

HTML:

<div class="sidebar">
<div class="sidebar-bd">
内容
</div>
</div>

CSS:

.sidebar{
width: 50px;
position: fixed;
top: 0px;
bottom: 0px;
background-color: #666a82;
z-index: 102;
overflow-x: hidden;
}
.sidebar .sidebar-bd{
width: 70px;
height: 100%;
overflow: auto;
overflow-x: hidden;
}

以上代码的效果是左侧固定的竖条,当内容超过一屏的时候,可滚动。

原理是外层限制宽度,设置超过部分隐藏;内层宽度增加20px,滚动条显示在增加的20px里,因为外层限制了显示宽度,所以有滚动条的时候就不会显示出来。

这个方法兼容IE8及以上。

PC版模块滚动不显示滚动条效果的更多相关文章

  1. HTML5 元素超出部分滚动, 并隐藏滚动条

    方法一, 利用 css 3 的新特性  -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE <!DOCTYPE html> <html> <head ...

  2. sencha touch textarea 手机上不显示滚动条,且不能滚动

    最近在项目中发现 sencha touch 中的 textarea 在手机上不显示滚动条,也不能滚动. 在浏览器中之所以能显示滚动条滚动,那是浏览器为 textarea 添加的滚动条. 但在手机中是不 ...

  3. 手机浏览PC版页面出现背景图片显示不全的问题解决方案

    手机浏览PC版页面出现背景图片显示不全 给定宽高的值

  4. 让PC版网站在移动端原样式显示

    一般PC网站在移动端显示效果往往和PC版原样式不同,为了在移动端下还原原PC站样式,可以采用以下方式解决: 1) 去掉页头的: <meta name="viewport" c ...

  5. CSS-界面滚动时不显示滚动条

    设置滚动条的样式: div::-webkit-scrollbar { width: ; }   关于::-webkit-scrollbar ::-webkit-scrollbar CSS伪类选择器影响 ...

  6. 基于 HTML + WebGL 结合 23D 的疫情地图实时大屏 PC 版

    前言 2019年12月以来,湖北省武汉市陆续发现了多例肺炎病例,现已证实为一种新型冠状病毒感染引起的急性呼吸道传染病并蔓延全国,肺炎疫情牵动人心,人们每天起来第一件事变成了关注疫情进展,期望这场天灾早 ...

  7. 基于 HTML + WebGL 结合 23D 的疫情地图实时大屏 PC 版【转载】

    前言 2019年12月以来,湖北省武汉市陆续发现了多例肺炎病例,现已证实为一种新型冠状病毒感染引起的急性呼吸道传染病并蔓延全国,肺炎疫情牵动人心,人们每天起来第一件事变成了关注疫情进展,期望这场天灾早 ...

  8. jQuery实现模拟滚动条效果;

    滚动条在web开发中,很常见,原生的HTML滚动条很难看,因此很多网站借助JS来模拟实现滚动条效果: 滚动条的实现原理其实比较简单,拿垂直滚动条来说: 1),最外层容器需要设置overflow:hid ...

  9. BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

随机推荐

  1. 安装hexo报错(npm WARN deprecated swig@1.4.2: This package is no longer maintained),已解决

    问题:在使用npm安装hexo时报错 $ npm install -g hexo npm WARN deprecated swig@1.4.2: This package is no longer m ...

  2. MNIST机器学习

    MNIST是一个入门级的计算机视觉数据集,它包含各种手写数字图片: 1. MNIST数据集 MNIST,是不是听起来特高端大气,不知道这个是什么东西? == 手写数字分类问题所要用到的(经典)MNIS ...

  3. 镜像的缓存特性 - 每天5分钟玩转 Docker 容器技术(14)

    上一节我们学习了镜像的分层结构,今天讨论镜像的缓存特性. Docker 会缓存已有镜像的镜像层,构建新镜像时,如果某镜像层已经存在,就直接使用,无需重新创建. 举例说明.在前面的 Dockerfile ...

  4. linux安装vmware tools 步骤

    虚拟机 -- 安装 VMware Tools 会自动挂载光驱. 1.  cd /misc/cd 2.  copy 文件到临时文件夹cp VMwareTools-9.6.2-1688356.tar.gz ...

  5. C# 中直接调用js方法

    请注意,我这段代码中实现js方法中有 funcName(argument) 这种一个入参的调用. using System; namespace game2_36.Common { public cl ...

  6. Trie树详解

    1. 概述 Trie树,又称字典树,单词查找树或者前缀树,是一种用于快速检索的多叉树结构,如英文字母的字典树是一个26叉树,数字的字典树是一个10叉树.Trie一词来自retrieve,发音为/tri ...

  7. python通过http请求发送soap报文进行webservice接口调用

    最近学习Python调用webservice 接口,开始的时候主要采用suds 的方式生产client调用,后来发现公司的短信接口采用的是soap报文来调用的,然后开始了谷歌,最后采用httplib ...

  8. kotlin 语言入门指南(三)--编码习惯

    这章主要讲当前 kotlin 的一些编码习惯. 命名 如无疑问,kotlin 的命名风格与以下的java风格一样: --驼峰命名法(不要使用下划线) --类名首字母大写 --方法和属性名首字母小写 - ...

  9. Centos5搭建vsftpd服务

    更换镜像源 由于centos5已经历史久远,内置的镜像源已经不能用.看: 因此,我手工更换了阿里云的源.(ps:我本来是想用网易的源,但不知为什么,这个源在安装vsftpd时提示http 404错误) ...

  10. 基于TypeScript的FineUIMvc组件式开发(概述)

    WebForm与Mvc 我简单说一下WebForm与Mvc,WebForm是微软很早就推出的一种WEB开发架构,微软对其进行了大量的封装,使开发人员可以像开发桌面程序一样去开发WEB程序,虽然开发效率 ...