今天下午无意在在一个博客上面看到一个效果;就是在页面上实现了小范围内内容的滚动条滚动查阅;
通常针对页面内部滚动条查阅实现方法是直接面对传统的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>
执行后的效果如下: