不用IFRAME实现页面内滚动条查阅完整内容-♚付涛纪实阁♚
欢迎访问付涛纪实阁官方网站!

不用IFRAME实现页面内滚动条查阅完整内容

今天下午无意在在一个博客上面看到一个效果;就是在页面上实现了小范围内内容的滚动条滚动查阅;

通常针对页面内部滚动条查阅实现方法是直接面对传统的IFRAME方式;经查阅代码却并未发现存在有IFRAME框架第三方或者其它页面的情况出现;效果如下图;

哪些场景下需要滚动条操作

1、针对某程序提供的插件更新日志记录;

2、网站模板更新日历及程序更新日志;

3、某个产品或功能的服务优势过多易出现长篇大论时;

4、……

其它更多场景自由发挥;

此种执行方法的优势:

1、滚动条内的页面依然存在于当前页面,而非另外一个页面;

2、滚动条内的内容在面对搜索引擎时,不影响;

3、一个页面尽量不要超过3个滚动条的内容,避免影响用户页面体验;

效果执行技术过程

其实这个过程在执行过程中也挺简单的,重点只有一个参数:

<div style="max-height: 400px; overflow-y: auto;">在此处添加内容</div>

其中【max-height: 400px】表示最前DIV内的内容在不出现滚动条的前提下最大支持的高度;

【overflow-y: auto】表示纵向的自动出现滚动条;

样例演示代码:

<div style="max-height: 400px;overflow-y: auto;">
	<div class="uk-block">
	asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>asdfasdfasdfasdfasdfasdfasdf<br>
	</div>
</div>

执行后的效果如下:

【要是觉得不错,请帮忙点下广告呗,谢谢!】
查阅标签同类文章:
当前链接:https://www.diebaosoft.com/9298.html责任编辑:付涛
14
【友情提示:】
1、文章内容系作者个人观点,不代表除个人作者外的任何第三方针对观点赞同或支持;
2、本文为「♚付涛纪实阁♚」原创文章,遵循创作共用版权 CC 4.0 BY-SA 协议,转载请附上原文出处链接及声明,否则默认视为侵权。
3、如本站个人观点有涉及不妥的地方,可联系【QQ:860227477】,提供合理合法依据,可无偿给予修改或删除。
4、同时针对站内所有来自于【精品软件共享】及其子栏目所分享的软件均为网络收集,请用户下载后24小时内删除,否则引起的争议全使用者承担,与本站无关;
5、针对本站内容若有异义,亦可直接与【法律顾问:易兴俊,律师联系电话:13825799821】直接联系沟通;