在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. 解决 Mybatis报错org.apache.ibatis.ognl.NoSuchPropertyException: XXXCriteria$Criterion.noValue

    问题 这个noValue一定存在,但是报错. 场景就是存在并发的情况下,尤其是在服务刚刚启动的时候,就会发生这个异常. 但是很不幸,mybatis 3.4.1之前,用的 OGNL都是由这个问题. 分析 ...

  2. Asp.net WebApi的授权安全机制 Basic认证

    1:Home/index.cshtml下面的Html代码 <div> <input value="1点击先登陆" type="button" ...

  3. Java基础(八)对象包装器与自动装箱

    1.对象包装器 有时候,需要将int这样的基本类型转换为对象.所有的基本类型都有一个与之对应的类.通常,这些类被称为包装器(wrapper). 这些对象包装类分别是:Integer.Long.Floa ...

  4. NetworkManager网络通讯_问题汇总(四)

    此篇来填坑,有些坑是unet自身问题,而大部分则是理解不准确造成的(或者unity定义太复杂) 问题一: isLocalPlayer 值一直是false 出现场景:NetworkLobbyPlayer ...

  5. SpringBoot与MybatisPlus3.X整合示例(十六)

    包含 分页.逻辑删除.自定义全局操作 等绝大部分常用功能的使用示例,相当于大整合的完整示例 pom.xml <dependencies> <dependency> <gr ...

  6. Spring中@Resource注解报错

    描述:Spring框架中,@Resource注解报错,在书写时没有自动提示 解决方法:因为maven配置文件的pom.xml文件中缺少javax.annotation的依赖,在pom.项目路中加入依赖 ...

  7. python:__name__的使用

    1.python中__name__是什么意思? 很多python的初学者可能都会遇到一个问题:__name__是什么意思? 在刚开始学习python的时候,我们总会看到这样一句代码: if __nam ...

  8. yii2中commands的简单应用

    class HelloController extends Controller { /** * This command echoes what you have entered as the me ...

  9. 使用asp.net core 3.0 搭建智能小车1

    跟随.net core 3.0 一起发布的System.Device.Gpio 1.0已经可以让我们用熟悉的C#原汁原味的开发莓派上面的GPIO了.并且在 Iot.Device.Bindings这个包 ...

  10. JavaScript BOM学习

    Mirror王宇阳 2019年11月13日 [首发] 数日没有更新博文了,觉得不好意思了!这不是,整理了一下JavaScript的一下BOM笔记资料,今天贡献出来!(HTML DOM也会随后整理发表) ...