css 给div添加滚动并隐藏滚动条
在html中
<div class="box">
<div>下面内容会单独滚动</div>
<div class="scroll">
<div class="content">
<p>1111111111111111</p>
<p>222222222222222</p>
<p>333333333333333</p>
<p>4444444444444444</p>
<p>1111111111111111</p>
<p>222222222222222</p>
<p>333333333333333</p>
<p>4444444444444444</p>
</div>
</div>
</div>
css部分
<style>
div{
font-size: 15px;
margin-bottom: 20px;
}
.content{
height: 300px;v // 必须设定滚动部分的高度
background-color: cadetblue;
color: antiquewhite;
overflow-x: hidden; /*x轴禁止滚动*/
overflow-y: scroll;/*y轴滚动*/
}
.content::-webkit-scrollbar {
display: none;/*隐藏滚动条*/
}
p{
margin-bottom: 30px;
font-size: 17px;
color: #333;
}
</style>
css 给div添加滚动并隐藏滚动条的更多相关文章
- css 之内容溢出滚动,隐藏滚动条(解决火狐浏览隐藏不了滚动条问题)
解决火狐浏览隐藏不了滚动条问题 1.里层容器的width多17px,外层容器溢出隐藏,能兼容各个浏览器 .outContainer { width:350px; height:300px; overf ...
- 为div添加滚动效果:
为div添加滚动效果: .xxxx{ width: 100%; height: 100%; overflow: hidden; overflow-y: auto;} 代码片段 <div clas ...
- HTML5 元素超出部分滚动, 并隐藏滚动条
方法一, 利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE <!DOCTYPE html> <html> <head ...
- 纯CSS手动滑动轮播图(隐藏滚动条)
HTML: <div class="bigder"> <div class="big"> <dl> <dt>&l ...
- css 给div 添加滚动条样式hover 效果
css .nui-scroll { margin-left: 100px; border: 1px solid #000; width: 200px; height: 100px; ...
- css给div添加阴影效果
直接上代码: <style type="text/css">.mydiv{ width:250px; height:auto; border:#909090 1px ...
- css给div添加0.5px的边框
具体代码实现如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 功能整合(一):滚动条的变相隐藏、js控制div的渐变显示、滚动条监听
1.滚动条的变相隐藏 思路: 1. 把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2. 然后把最外层的div的宽设置的比body的宽宽一点,把d ...
- css 隐藏滚动条
如何使用css隐藏滚动条 如何隐藏滚动条,同时仍然可以在任何元素上滚动? 首先,如果需要隐藏滚动条并在内容溢出时显示滚动条,只需要设置overflow:auto样式即可.想要完全隐藏滚动条只需设置ov ...
随机推荐
- JVM - 复习
内存模型图 程序计数器(PC) 程序计数器的特点 PC是一小块内存空间,用于记录当前线程执行的字节码指令的地址.如果执行的是本地方法(native),PC里此时显示Undefined 优点: 控制程序 ...
- MySQL基础篇(1)SQL基础
SQL是Structure Query Language(结构化查询语言)的缩写,它是使用关系模型的数据库应用语言. 一.SQL分类(DDL,DML,DCL) DDL(Data Definition ...
- 腾讯云上面部署PHP运行环境
现在云服务器已经很普及了,其价格.安全优势等成为不少开发者的首选.本人由于兴趣爱好,从朋友那边借了一个过来玩了两天,下面就分享整个部署流程吧. 1. 先到腾讯云官网购买服务器,这边就不演示.很简单,跟 ...
- Blazor之ABC
.net core正式推出了Blazor, 正好在一个小项目里试用一下. 建立项目 因为基于WebAssemble的客户端Blazor还不是正式版, 为了避免不必要的麻烦,我试用服务端的Blazor. ...
- 基于canvas的流程编辑器
今年由于项目上需要给客户的流程管理系统进行升级,其中包含流程的可视化.于是在网上找一些可以用的轮子,考察了D3,js.GooFlow.js.G6-Editor等工具后,发现D3,js学习成本太高,G6 ...
- 重置root密码!
偶尔把密码忘记了也不用慌,重置密码只需简单几步: 第1步:开机后在内核上敲击“e”. 第2步:在linux16这行的后面输入“rd.break”并敲击“ctrl+x“. 第3步:进入到了系统的紧急求援 ...
- TCP协议--TCP三次握手和四次挥手
TCP三次握手和四次挥手 TCP有6种标示:SYN(建立联机) ACK(确认) PSH(传送) FIN(结束) RST(重置) URG(紧急) 一.TCP三次握手 第一次握手 客户端向服务器发出连 ...
- 你了解MySQL的加锁规则吗?
注:加锁规则指的是next-key lock,如果还不了解next-key lock,请阅读上一篇博客 加锁规则可以概括为:两个原则.两个优化和一个bug: 原则1:加锁的基本单位是next-key ...
- NuGet Package Explorer使用教程下载
1.下载NuGet Package Explorer http://www.pc0359.cn/downinfo/91514.html 2.双击NuGet Package Explorer出现启动界面 ...
- ACGallery I: Sequence diagram for reading photos:
AC Photo Gallery is an open-source web app, which designed to organize photos/albums. Codes on Githu ...