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 ...
随机推荐
- unity 序列帧播放
[SerializeField] private Image m_ScreenImage; //序列帧播放的image [SerializeField] ; // 一秒播放的帧数 [Serialize ...
- Cookie 、session、token都是什么?
1.Cookie 起源:1993年,网景浏览器的员工为了让用户访问某网站时,进一步提高访问速度,实现个人化网络发明了cookie.(看来有时候的偷懒会促进社会的进步啊~,就像人们不想做饭就诞生了外卖) ...
- Mybatis JdbcType与Oracle、MySql 数据类型对应关系
MyBatis 包含的jdbcType类型 ------------------------------------------------------------------------------ ...
- MySQL、Oracle、SqlServer的区别
鉴于和数据库打交道日益频繁,遂决定写一篇关于Oracle.SqlServer.MySQL区别的个人观点. MySQL是大学时的主要学习对象,但刚参加工作时转到了SqlServer,现在主要接触的是Or ...
- 前端技术之:常用webpack插件
1.html-webpack-plugin Simplifies creation of HTML files to serve your webpack bundles. 主页地址: https ...
- 转载:全面理解面向对象的 JavaScript
来源:DeveloperWorks – 曾滢著 简介: JavaScript 函数式脚本语言特性以及其看似随意的编写风格,导致长期以来人们对这一门语言的误解,即认为 JavaScript 不是一门面向 ...
- [考试反思]1002csp-s模拟测试57:平庸
一天两场,感觉要完. 不粘排行榜,太壮观了. #1:190 #2:180 #4:160 #35:150 #37:140 #39:120 #kx:20呃... 最后一个是考试结束后了. 又是CE盖40分 ...
- 路由传参 query 和 params
vue路由传参分为两种情况: 一.query和params传参的区别: 1.query传参显示参数,params传参不显示参数,params相对于query来说较安全一点. 2.取值方法也有不同:qu ...
- js内容溢出用省略号(...)表示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Requests库使用总结
概述 Requests是python中一个很Pythonic的HTTP库,用于构建HTTP请求与解析响应 Requests开发哲学 Beautiful is better than ugly.(美丽优 ...