DIV 滚动条的自动显示隐藏

╰半橙微兮° 2022-06-08 14:05 313阅读 0赞

<html>
        <head>
    	<style>
    	.Div {
    		 white-space:nowrap;
    		 width:150px;
    		 height:150px;
    		 overflow:auto;
    	}
    	</style>
    	</head>
    	<body>
    		<div  class="Div">
    		<P id="P1" >asdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</P>
    		<P id="P2" >asdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</P>
    		<P id="P3" >asdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</P>
    		<P id="P4" >asdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</P>
    		<P id="P5" >asdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</P>
    		<P id="P6" >asdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</P>
    		<P id="P7" >asdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</P>
    		<P id="P8" >asdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</P>
    		<P id="P9" >asdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</P>
    		<P id="P10" >asdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</P>
    		<P id="P11" >asdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</P>
    		<P id="P12" >asdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</P>
    		<div>
    	<body>
    <html>

![Center][]

1. white-space:nowrap;   不换行

2. overflow:auto;  垂直和横向滚动条自动 （相当于overflow-x:auto;overflow-y:auto;）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70][]

[Center]: /images/20220608/8ec78cf1f3a748b38bef6f08de2b6d10.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70]: /images/20220608/5ef155849cbb44899d6f8243a23cf7d9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，313人围观）

还没有评论，来说两句吧...

相关阅读

相关隐藏div滚动条

溢出隐藏，写两个div，高度都固定，外面的固定宽度overflow: hidden;里面的div宽度比外面的稍宽，最好算好滚动条的宽度，[overflow-y][]: auto

刺骨的言语ヽ痛彻心扉/ 2023年06月19日 02:16/ 0 赞/ 56 阅读

相关 html在div中显示滚动条

基本思路：滚动条要添加到内容部分的父标签上（div），内容部分不设置大小，父标签要明确设置大小，并且父标签要添加overflow样式，并设置成auto。 ![379702-2

亦凉/ 2023年06月04日 12:59/ 0 赞/ 86 阅读

相关 div 滚动条同步控制 div 滚动条滚动

<html> <head> <title>div scroll</title> <mce:style type="text/css"><!-- DIV \{width:200;

系统管理员/ 2022年07月13日 11:17/ 0 赞/ 367 阅读

相关 DIV 滚动条的自动显示隐藏

<html> <head> <style> .Div { white-space:nowrap; wid

╰半橙微兮°/ 2022年06月08日 14:05/ 0 赞/ 314 阅读

相关纯css，div隐藏滚动条，保留鼠标滚动效果。

当我们的内容超出了我们的div，往往会出现滚动条，影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。我们不希望出现滚动条，也不希望超出去的内容

浅浅的花香味﹌/ 2022年06月04日 05:11/ 0 赞/ 314 阅读

相关 iframe的滚动条问题：显示/隐藏滚动条

1. XHTML 1.0 Transitional 标准不能显示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

冷不防/ 2022年02月15日 15:29/ 0 赞/ 482 阅读

相关 div超出部分滚动并且隐藏滚动条

想要实现的效果是：div具备滚动效果，但是外面看不到滚动条。需求：博客系统，由于发博客的人数较多，不能全部显示在页面上，所以需要滚动效果，但是界面上一般会安排一个div专门

缺乏、安全感/ 2021年12月19日 15:39/ 0 赞/ 488 阅读

相关让div的滚动条隐藏获启用

overflow-y:scroll; 显示纵向滚动条 overflow-y:hidden; 隐藏纵向滚动条 overflow-x:scroll; 显示横向滚动条 over

阳光穿透心脏的1/2处/ 2021年11月29日 23:58/ 0 赞/ 402 阅读

相关隐藏DIV 显示DIV

　　昨天做项目，用到了隐藏和显示DIV，在页面加载的时候，默认隐藏，当触发一个服务器控件时，显示此DIV，然后对此操作完成后，在点击DIV上服务器控件隐藏DIV，方法很简单，可

╰+攻爆jí腚メ/ 2021年11月01日 23:02/ 0 赞/ 511 阅读

相关 css添加了原始滚动条要隐藏滚动条的显示

// 添加伪类 <style> ::-webkit-scrollbar {display:none} </style> <d

深藏阁楼爱情的钟/ 2021年09月19日 10:10/ 0 赞/ 437 阅读