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 ...
随机推荐
- Excel接口导出,导入数据库(.Net)
public ActionResult TestExcel(string filePath) { return View(); } /// <summary> /// 根据Excel列类型 ...
- 数据库系统(六)---MySQL语句及存储过程
一.DDL.DML.DCL常用语句 1.DDL(Data Definition Language)数据库定义语言 (1)数据库模式定义 #创建数据库 create database if exsite ...
- 2018.8.9 python中的动态传参与命名空间
主要内容: 1.函数参数 ----动态传参 2.名称空间与作用域 3.函数的嵌套 4.global,nonlocal关键字 一.函数参数 ------动态传参 形参的第三种:动态传参 动态传参分为两种 ...
- Android Studio Module 引入aar
1.把aar文件放到module的libs目录下 2.作为lib的module的gradle文件: repositories { flatDir { dirs 'libs' } } dependenc ...
- 适用于Windows桌面应用程序的.NET Core 3
介绍 9月,微软发布了新版.NET Core,用于构建Windows桌面应用程序,包括WPF和Windows Forms.从那时起开发人员可以将传统的nfx桌面应用程序(和控件库)迁移到.NET Co ...
- springboot集成log4j2 + logstash 异步输出日志
一. spring boot 集成log4j2 1.maven引入jar包 <dependency> <groupId>org.springframework.boot< ...
- AQS 入门
一 AQS简介 路径:java.util.concurrent.locks.AbstractOwnableSynchronizer. 定义:AQS提供了一种 通过维护一个volatile修饰 int类 ...
- 使用 Github + Hexo 从 0 搭建一个博客
最近有几位同学在公众号后台留言问我的博客站是怎么建站的,思来想去,还是写一篇从 0 开始吧. 前置准备 我们先聊一下前置准备,可能很多同学一听说要自己搭一个博客系统,直接就望而却步.不得有台服务器么, ...
- 带你上手一款下载超 10 万次的 IDEA 插件
作者 | 倪超(银时) 阿里云开发者工具产品专家 本文整理自 11 月 7 日社群分享,每月 2 场高质量分享,点击加入社群. 导读:Cloud Toolkit 是本地 IDE 插件,帮助开发者更高效 ...
- 《吊打面试官》系列-Redis常见面试题(带答案)
你知道的越多,你不知道的越多 点赞再看,养成习惯 GitHub上已经开源,有面试点思维导图,欢迎[Star]和[完善] 前言 Redis在互联网技术存储方面使用如此广泛,几乎所有的后端技术面试官都要在 ...