在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. 不同的phper该如何区别使用swoole和workerman?

       那么我们该怎样去区别应用swoole和workerman?                workerman workerman纯php写的,swoole是php的c扩展,性能肯定更高,百度.腾 ...

  2. Redis5源码解析-Sentinel

    简单的概念就不解释.基于Redis5.0.5 从Sentinel主函数触发 在sentinel.c文件的最后面可以发现sentinelTimer函数,这个就是Sentinel的主函数,sentinel ...

  3. nginx原理和优化

    Nginx的模块与工作原理 Nginx由内核和模块组成,其中,内核的设计非常微小和简洁,完成的工作也非常简单,仅仅通过查找配置文件将客户端请求映射到一个location block(location是 ...

  4. ArangoDB 界面介绍

    目录: 安装并运行本地ArangoDB服务器 使用Web界面与之交互 BASHBOARD COLLECTIONS QUERIES GRAPHS SERVICES USERS LOGS 安装: 下载地址 ...

  5. IE8下Extjs报缺少':'符号错误

    先介绍下这个问题的由来: 上午其他项目组人员在rtx上问,求帮忙解决ie8兼容性问题. 然后快到饭点,知道这个bug肯定不是那么好解决,肯定不能耽误吃饭时间. 果断说,下午来弄. 下午3点开始去看这个 ...

  6. post方式实现导出/下载文件

    项目需求: 前端需要传入过多的参数给后端,get地址栏不行,只能接受post方式去导出数据 1.get的下载方式 通常下载方式如下: let url = xxxx.action?a=xx&b= ...

  7. 前端与算法 leetcode 26. 删除排序数组中的重复项

    目录 # 前端与算法 leetcode 26. 删除排序数组中的重复项 题目描述 概要 提示 解析 算法 # 前端与算法 leetcode 26. 删除排序数组中的重复项 题目描述 26. 删除排序数 ...

  8. NOIP模拟 11

    差点迟到没赶上开题 开题后看了T1,好像一道原题,没分析复杂度直接敲了个NC线段树,敲了个暴力,敲了个对拍,就1h了.. 对拍还对出错了,发现标记下传有点问题,改了以后对拍通过,就把T1扔掉看T2 觉 ...

  9. 机器学习之scikit-learn库

    前面讲到了,这个库适合学习,轻量级,所以先学它. 安装就不讲了,简单.不过得先安装numpy和pandas库才能安装scikit-learn库. 如果安装了anaconda得话,会自带有这个库. -- ...

  10. 『图论』LCA最近公共祖先

    概述篇 LCA(Least Common Ancestors),即最近公共祖先,是指这样的一个问题:在一棵有根树中,找出某两个节点 u 和 v 最近的公共祖先. LCA可分为在线算法与离线算法 在线算 ...