Overflow:auto解决scoll 问题

最新推荐文章于 2023-11-10 18:14:22 发布
最新推荐文章于 2023-11-10 18:14:22 发布
阅读量691 收藏
点赞数
分类专栏： WebUi 文章标签： javascript 前端 ViewUI 
<html>
	<head>
		<style type="text/css">
			.usb {
				width:100px;
				height:200px;	
			}	
		</style>
		<title>用户信息</title>
	</head>
	<body>
		<div class="usb">
		<div  style="width:100%;height:100%;overflow:auto;">
		usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>
		===========================
		</div>
	</div>
		---------------------------
		<div class="usb">
		<div style="width:100%;height:100%;overflow:auto;">
		usb
		<br/>
usb
		<br/>
usb
	
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usbbr/>u2222222222222222222sb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>usb
		<br/>
		</div>
	</div>
	</body>
	
</html>

 

cq_liuqing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序overflow:auto; ios设备卡顿问题
01-03
我们在开发微信小程序的时候，经常会使用到overflow...友情提醒：我推荐你使用微信小程序scroll-view组件实现局部滚动功能，scroll-view微信已经做好了兼容问题，不会出现这种不兼容的问题。用的时候记得给height设值哦
CSS中overflow:scroll怎么设置只上下滚动而不左右滚动
09-25
具体到你的问题，你提到的解决方案是使用以下CSS样式： ```css <div class="sidebar-nav" style="overflow:auto;overflow-x: hidden"> ``` 这里，`overflow:auto`实际上已经足够处理大部分情况。当内容在垂直方向...
overflow：scroll和auto
时光留不住，毕竟东流去
04-09 2912
overflow: scroll将隐藏所有溢出的内容并使滚动条出现在相关元素上。如果内容没有溢出，滚动条始终可见，但被禁用。 overflow: auto 非常相似，但滚动条仅在内容溢出时出现 所占空间位置不同 overflow: scroll情况下，内容自动撑开容器的宽度不包括滚动条，相当于滚动条是一个和内容并列显示的组件。 overflow: scroll 而overflow: auto情况...
overflow:scroll与overflow:auto的区别
hellow_tommer的博客
01-14 3124
首先我们需要了解到如何滑动内容 这就用到了一个属性：overflow overflow: scroll;//如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 overflow: auto;//如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 他们都可以加滚动条进行滑动，如果作用相同，为什么会出现两个？ 那肯定是因为他们有所不同，先让我们去看一看，他们的效果是什么样子的： 第一个是使用scroll的 第二个是使用auto的 然后我们再看下一张进行对比
overflow：auto的用法和实现弹性盒横向滚动
YY的博客
09-29 1万+
overflow：auto的用法、实现弹性盒横向滚动
overflow:auto与scroll区别
weixin_44941889的博客
11-09 3515
overflow: auto与scroll在内容超出时浏览器均会显示滚动条 但在元素没有超出时，auto会隐藏滚动条，scroll依旧显示滚动条，但是禁用该滚动条
CSS属性overflow详解（auto hidden）
qq_44537625的博客
09-02 6187
overflow用在什么地方 overflow 属性规定当内容溢出元素框时发生的事情。 overflow有哪些属性值？ 1. visible 默认值。内容不会被修剪，会呈现在元素框之外。 2. hidden 内容会被修剪，并且其余内容是不可见的。 3. scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 4. auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 ...
详解overflow-scrolling解决滚动卡顿问题
01-18
以下代码可解决这种卡顿的问题：-webkit-overflow-scrolling: touch;，是因为这行代码启用了硬件加速特性，所以滑动很流畅。这个方法的确可以解决ios5.0、android4.0以后系统的滑动卡顿问题。 -webkit-overflow-...
css中position:relative和overflow:hidden之间的问题
09-25
`overflow`属性则用于处理内容溢出其容器时的显示方式，它可以设置为`visible`（默认值，允许内容溢出）、`hidden`（隐藏溢出内容）、`scroll`（添加滚动条以查看溢出内容）或`auto`（根据需要添加滚动条）。...
移动webview 支持overflow:auto
05-29
移动版游戏器不支持overflow:auto，即多余内容隐藏，并能通过手指拉动来滚动内容。目前有很多模拟这种效果的js库，如iScroll。但经项目测试，iscroll在很多浏览器中有明显的性能问题。一怒之下写了这个库，性能刚刚...
overflow:auto的用法详解
01-18
在开始正文前，我介绍一下overflow和flex布局的某些用法。 overflow：auto；如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。 flex中的属性 display: flex; flex-direction: column; 主轴为垂直方向，起点在上沿。 overflow和flex布局搭配使用 代码如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>overflow:auto的用法</title> <meta name=viewport content=
解析css中的overflow属性
最新发布
m0_68845148的博客
11-10 6968
overflow 属性规定当内容溢出时发生的事情overflow有以下几种属性值：不裁剪超出盒子的部分将超出盒子部分的内容隐藏横轴强制出现滚动条4.overflow-y:scroll 纵轴强制出现滚动条5.overflow：scroll x轴和y轴都有滚动条自动判断是否出现滚动条从父元素继承overflow属性的值overflow属性值中visible和hidden是对立的，scroll和auto是对立的。inherent是继承父级元素的overflow属性值，默认是scroll。
overflow-y: auto；解决页面出现滚动条导致背景色未铺满的情况
qq_41910413的博客
04-20 2072
前端页面会遇到页面要设置全局背景色，但是一旦内容过多，页面出现滚动条，就会发现，怎么滚动到下面，背景色不是全部铺满的，超出一屏的内容是没有背景色的。这时候就可以给页面最外层标签加上。就会发现背景色被完全铺满了。
overflow：auto出现滚动效果不显示滚动条
zkx529的博客
05-11 5201
问题描述 overflow：auto 子元素超过父元素高度或者宽度时会出现滚动条（需要设置高度和宽度），当我这么设置之后出现了滚动效果却没有滚动条。 问题原因 全局写了滚动条宽度为0。 ::-webkit-scrollbar : {width:0} 当我用样式覆盖后还是没有出现。 ::-webkit-scrollbar : {width:0} 可能原因是样式没有写完整。 解决办法 将样式写全 .printLogFather::-webkit-scrollbar { widt
overflow：auto的用法
热门推荐
boysky0015的博客
05-31 4万+
在开始正文前，我介绍一下overflow和flex布局的某些用法。 overflow：auto；如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。 flex中的属性 display: flex; flex-direction: column; 主轴为垂直方向，起点在上沿。 overflow和flex布局搭配使用 代码如下：<!DOCTYPE html> <html> <head>
float,clear及overflow总结
ynd_sg的博客
03-20 1559
float浮动时，脱离文档流(不脱离文本流)，但是否占据空间有两种情况： （文档流是文档中可显示对象在排列时所占用的位置）（文本流是指html文本的显示，是相对于文字段落来说的。） 情况一：如果浮动元素后紧随的标签果是 内联 或 内联块元素，浮动占据空间。 情况二：浮动元素后紧随的 是 块级元素的时候，浮动不占据空间 ，像是浮动元素不存在一样(要设置更大的margin-left(图片宽度加...
Vue 设置overflow: auto 后监听滚动距离
达拉崩巴斑得贝迪卜多比鲁翁_
09-03 1539
overflow: auto 后监听滚动距离 <div class="page-body-inner" @scroll.passive="getScroll($event)"></div> getScroll(e) { console.log(e.target.scrollTop) }, if 想要点击之后 从顶部开始滚动 方法如下 <div id="over"> </div> document.getElementById('over').s
overflow:auto和scroll区别
03-16
overflow:auto和scroll都是用来控制元素溢出内容的滚动方式的属性。 区别在于，当元素内容没有超出容器大小时，overflow:auto不会显示滚动条，而scroll会一直显示滚动条；当元素内容超出容器大小时，overflow:auto会自动显示滚动条，而scroll也会一直显示滚动条。 另外，overflow:auto还可以根据元素内容的大小自动调整滚动条的显示方式，而scroll则不会自动调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值