在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添加滚动并隐藏滚动条的更多相关文章

  1. css 之内容溢出滚动,隐藏滚动条(解决火狐浏览隐藏不了滚动条问题)

    解决火狐浏览隐藏不了滚动条问题 1.里层容器的width多17px,外层容器溢出隐藏,能兼容各个浏览器 .outContainer { width:350px; height:300px; overf ...

  2. 为div添加滚动效果:

    为div添加滚动效果: .xxxx{ width: 100%; height: 100%; overflow: hidden; overflow-y: auto;} 代码片段 <div clas ...

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

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

  4. 纯CSS手动滑动轮播图(隐藏滚动条)

    HTML: <div class="bigder"> <div class="big"> <dl> <dt>&l ...

  5. css 给div 添加滚动条样式hover 效果

             css .nui-scroll { margin-left: 100px; border: 1px solid #000; width: 200px; height: 100px; ...

  6. css给div添加阴影效果

    直接上代码: <style type="text/css">.mydiv{   width:250px; height:auto; border:#909090 1px ...

  7. css给div添加0.5px的边框

    具体代码实现如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. 功能整合(一):滚动条的变相隐藏、js控制div的渐变显示、滚动条监听

    1.滚动条的变相隐藏 思路: 1.  把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2.  然后把最外层的div的宽设置的比body的宽宽一点,把d ...

  9. css 隐藏滚动条

    如何使用css隐藏滚动条 如何隐藏滚动条,同时仍然可以在任何元素上滚动? 首先,如果需要隐藏滚动条并在内容溢出时显示滚动条,只需要设置overflow:auto样式即可.想要完全隐藏滚动条只需设置ov ...

随机推荐

  1. lambda高级查询

    1.什么是lambda表达式:Lambda 表达式,是一种简化的匿名函数,可用于创建委托或表达式目录树.其次,也可以将 Lambda 表达式作为参数进行传递,或者将它作用于函数调用值调用后返回的一个函 ...

  2. Core3.0的 安装与坑坑坑!!!

    Core3的 SDK下载地址是:https://dotnet.microsoft.com/download/dotnet-core/3.0  ! 不要下载preview8!!!,请先下载 previe ...

  3. 你编写的Java代码是咋跑起来的?

    如果你是一名 Java 开发人员,你肯定指定 Java 代码有很多种不同的运行方式.比如说可以在开发工具(IDEA.Eclipse等)中运行,可以双击执行 jar 文件运行,也可以在命令行中运行,甚至 ...

  4. TensorFlow Object Detection API中的Faster R-CNN /SSD模型参数调整

    关于TensorFlow Object Detection API配置,可以参考之前的文章https://becominghuman.ai/tensorflow-object-detection-ap ...

  5. mha格式的CT体数据转为jpg切片

    mha格式的CT体数据转为jpg切片 mha格式 .mha文件是一种体数据的存储格式,由一个描述数据的头和数据组成,一般我们拿到的原始医学影像的数据是.dcm也就是dicom文件,dicom文件很复杂 ...

  6. 虚拟机kali linux与windows主机共享文件

    在windows中我们可以直接拖拽文件,有的时候wmtools无效 很苦恼 从kali中托文件就不可以, 于是那就用到了共享文件夹 一.在虚拟机名称处右键,选择设置,会弹出一个设置框 二.选择选项-& ...

  7. (八)golang--复杂类型之指针

    首先我们要明确:(1)基本数据类型:变量存的就是值,也叫值类型: (2)获取变量的地址,用&,例如var num int,获取num的地址:&num: (3)指针类型:变量存的是一个地 ...

  8. [考试反思]0902NOIP模拟测试35:摆动

    skyh/Mr.zkt214 cbx204 6个200 4个180 172 162 我:rank16,160 呃,可以看到这个分差.... 对了教练说了两句话需要记录一下: 1.不要因为一时情绪而作出 ...

  9. CSS(5)---通俗讲解盒子模型

    CSS(5)---盒子模型 盒子模型四个关键字:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 一.概念 1. 概念 盒子 ...

  10. Hive数据仓库你了解了吗

    在工作中我们经常使用的数据库,数据库一般存放的我们系统中常用的数据,一般为百万级别.如果数据量庞大,达到千万级.亿级又需要对他们进行关联运算,该怎么办呢? 前面我们已经介绍了HDFS和MapReduc ...