html 把div变为滚动

最新推荐文章于 2022-01-27 10:24:57 发布
最新推荐文章于 2022-01-27 10:24:57 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42046751/article/details/111515993
版权

1. 要先明确思路：

在需要滚动的内容的外层，包上一层div，内容部分不需要设置长宽，它外层的div要明确设置长宽 并且要给这个div设置overflow:auto。

2. 测试代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	
	<body>
		<div style="width:200px; height:300px; overflow:auto;">
			<div style="width:100%; height:600px;background-color: aqua;">要滚动的内容</div>
		</div>
	</body>
</html>

3. 上面代码的运行效果，如下图：

且随疾风前行_go
关注
专栏目录
html div实现滚动效果,纯css3滚动效果
weixin_42168230的博客
06-09 1279
看到该实例标题的时候，表示心情十分激动然后再加上一点忑忑，因为以前看过类似的，但是都比较有缺憾，不那么完美。可是这个媲美从前所有的纯css3打造的滚动效果，可以堪称完美了(除了没有导航控制)。只因制作巧妙精美，所以我只表示欣赏而不好加以评论，感兴趣的话大家还是自己手动研究下为好。因css3代码篇幅较长，这里只抽出一部分重要的以供参阅：#slider li.firstanimation {-moz-...
用 div 实现自制滚动条
切糕的技术博客
03-21 2574
https://math-digital.cn/blog/11
html div 滚动
weixin_34019929的博客
09-25 154
HTML 顶部DIV层固定 随滚动条移动 显示位置不变 IE6不支持position: fixed; bottom: 0;对于这个功能，几乎是前端攻城师的一个心痛，让更多人加入放弃兼容IE6的阵容，然而IE6可是在中国占着有绝大多数的用户，不兼容IE6，难道还要何自己的饭碗过不去吗？ 对于解决IE6不兼容的方法，目前我只撑据两种，一种使CSS表达式处理，另一种用javascript辅助实现...
转: div:给div加滚动条　div的滚动条设置
amkokq884222的博客
01-20 792
div 的滚动条问题： 两种方法： 一、 <div style=" overflow:scroll; width:400px; height:400px;”></div> 记住宽和高一定要设置噢，否则不成的 不过在不超出时，会有下面的滚动条，所以不是最好的选择 二、 <div style=" overflow-y:auto; overfl...
html 向上滚动 不间断,向上不间断滚动div+css+js模板
weixin_34503235的博客
06-03 457
div+css不间断向上滚动模板上一次给大家介绍一种div css的不间断滚动代码JS特别多(不间断滚动css代码)，这次给大家介绍的是比较实用比较简单的不间断css滚动代码DIV+CSS不间断滚动代码效果图 -CSS不间断滚动div+css css手册 css css研教室divcss5模板-上下不间断滚动DIV+CSSdiv+css向上不停滚动演示CSS向上不停滚动演示divcss向上不停滚动...
如何让div滚动
germmy-神一样的开发
09-07 121
  给div设了固定的宽高后，再用overflow:auto后它才能出现滚动条。   refurl:http://bbs.csdn.net/topics/220055655  
div滚动条优化
11-01
因此，优化滚动条主要是为了实现自定义的外观和行为，例如将滚动条变为半透明，以更好地融入网页背景。 CSS3引入了`::-webkit-scrollbar`和`::-webkit-scrollbar-thumb`伪元素，允许开发者对Webkit内核的浏览器（如...
滚动条到底部弹出div
10-26
在网页设计中，"滚动条到底部弹出div"是一种常见的交互效果，它通常用于实现无限滚动、加载更多内容或显示底部菜单等场景。这个功能是通过JavaScript和CSS结合实现的，下面我们将详细探讨如何实现这个效果。 首先，...
html滚动数字
12-05
在每个循环迭代中，它会更新`<div>`中的文本，并使用`setTimeout`来创建延迟，使得数字的变化看起来像是在平滑滚动。 如果你希望数字滚动效果能自动进行，可以定时调用`scrollNumberTo`函数，并根据实际需求设置新...
滚动至DIV后，动画显示
12-11
在网页设计中，"滚动至DIV后，动画显示"是一种增强用户体验的常见技术。这个功能通常结合JavaScript（尤其是jQuery库）和CSS3动画来实现，让网页内容在用户浏览到特定区域时动态呈现，增加了视觉吸引力。下面我们将...
为div添加滚动条.html
04-16
为div添加滚动条 html 欢迎下载
WEB网页DIV层背景图循环向上滚动效果
02-17
1.适用于但网页APP推广页面美化，WEB网页DIV层背景图循环向上滚动效果 2.此效果为静态HTML效果美化
html平滑拖动div,html 简单 div 拖动
weixin_35863455的博客
06-11 176
G_Gvar start = '';var end = '';function test(){oEvent = window.event ? window.event : event;start += 'document.write(start+end);}function mousedown(obj){obj.onmousemove = mousemove;obj.onmouseup = mou...
html上div自动滑动,div内的自动滑动内容？
weixin_36087083的博客
05-31 451
var swap = false;var w = 309;var h = 261;var i = 0;var x = 0;var q = 1;var t;window.onload=function(){i = initPortfolio();setTimeout("portfolioRotate()",2000);}function initPortfolio(){$('.portfolio-i...
html中怎么让div自动滑动,干货！div滚动到一定位置就固定他
weixin_39968852的博客
06-02 3379
尊重原创：转载请申明出处div滚动到一定位置就固定他，例如左边的内容很多，右边的内容很少，如果不处理滚动到一定位置后右边的数据就看不到了，所以可以在滚动到一点层度后保持右边的数据不动不随着滚动条的滚动而滚动,这样不会只看到一边的内容，另外一边是空白的情况,用户体验很更好，颜值会更高....。废话不多说！直接上代码 。不要小看这点代码，自己一点一点写还是会遇到坑的，会花不少时间的，抛砖引玉，分享才会...
html设置div滚动条实现超简单
徊忆羽菲
03-11 3112
html设置div滚动条实现超简单html设置div滚动条实现超简单 html设置div滚动条实现超简单 <div class="qipa-250" style="height: 400px; overflow:scroll"> <div style="border: 1px #000000; width: 90%; margin: 0 auto;"> <span> &lt
html纵向广告滚动,在html中如何实现跟随页面滚动的DIV层？（就像网页上很多广告那样，拉下去了 广告始终在页面那位置）...
weixin_39614834的博客
05-30 236
满意答案这是右边的浮动导航body{_background-image:none; /*հҳΪ*/_background-attachment:fixed; }//这个是针对ie6的.navi{left:51%; margin-left:474px;top:120px;position:fixed;_position: absolute;_top: expression(documentE...
内容在某div中滚动
qq_43185226的博客
01-27 1063
1.设定外层div在屏幕中的高度。 2.设置div刷新style="-webkit-overflow-scrolling: touch; overflow: scroll“
html 原生滚动条详解，看这一篇就够了！
热门推荐
zzzzls 的博客
03-18 1万+
最近在做一个聊天室的小案例，遇到了一个关于滚动条的问题，需要对获取的信息即时滚动以保证用户总能看到最新消息。聊天程序是基于 ajax 实现的，没有使用框架，消息容器是一个 div，查阅大量资料后写下这篇文章，以作记录！
如何实现HTML元素随滚动而出现
最新发布
09-15
在HTML和CSS中，可以使用动画和一些JavaScript技巧来实现元素随着页面滚动而逐渐出现的效果。这通常通过“懒加载”或“滚动加载”技术完成。以下是简单的步骤： 1. **CSS隐藏**: 元素初始设置为`display: none;` 或 `opacity: 0;`，使其在页面加载时不可见。 2. **判断位置**: 使用JavaScript或jQuery，监听窗口的滚动事件（`window.onscroll`），并检查元素距离视口顶部的距离。 3. **计算触发点**: 设定一个阈值，当元素位于这个高度范围内时，开始显示。例如，如果元素应该在用户滚动到屏幕底部的一半时出现，那么你可以将触发点设为窗口高度的50%。 4. **改变样式**: 当满足触发条件时，修改元素的样式，将其从隐藏状态变为可见，如设置`display: block;` 和 `opacity: 1;`。 5. **动画效果** (可选)： 如果希望有平滑的过渡效果，可以在改变样式的同时添加`transition`属性，调整时间间隔和动画类型。 ```html <div id="scrolling-element" style="display: none;"> <!-- Your content here --> </div> <script> window.onscroll = function() { const element = document.getElementById('scrolling-element'); if (element.offsetTop - window.innerHeight * 0.5 < 0) { // Adjust the threshold as needed element.style.display = 'block'; element.style.opacity = 1; // If you want an animation element.style.transition = 'opacity 1s ease-in-out'; } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值