不要小看了css+html,虽然说网页上的任何效果都是可以用js来实现,但是往往用到js来处理的话,就会影响dom,从而产生性能上的问题, 就来举一个小例子 因为要做一个单独区域的滚动,而滚动区域的内
不要小看了css+html,虽然说网页上的任何效果都是可以用js来实现,但是往往用到js来处理的话,就会影响dom,从而产生性能上的问题,
就来举一个小例子
因为要做一个单独区域的滚动,而滚动区域的内容是动态渲染的,先来看代码吧
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .outElem{ height: 100px; width: 200px; } .inElem{ overflow-y:scroll; } </style></head><body> <div class="outElem"> <ul class="inElem"> <li>1111</li> <li>222</li> <li>3333</li> <li>4444</li> <li>555</li> <li>6666</li> </ul> </div></body></html>现在我们看到的效果是这样的
那么问题就来了,当这个数据正好显示的时候,边上这个空白的滚动条就有点多余
但是如果在css中去掉overflow的话,
如果动态数据比较多,又需要滚动了怎么办?
那这个时候不借助js的最好方法是怎么样的呢?
看下面的代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .outElem{ height: 100px; width: 200px; overflow: hidden; } .inElem{ overflow-y:scroll; overflow-x:hidden; width: 210px; height: 100%; } </style></head><body> <div class="outElem"> <ul class="inElem"> <li>1111</li> <li>222</li> <li>3333</li> <li>4444</li> <li>555</li> <li>6666</li> <li>6666</li> <li>6666</li> <li>6666</li> <li>6666</li> </ul> </div></body></html>这个时候看到的网页效果就是这样的
这个时候把鼠标放在这块区域上,是可以滚动的,而且也去掉了边上难看的滚动条
那么要做的这个效果的话有四个要素
1.外层元素必须设置overflow:hidden
2.内层元素必须设置overflow-y:scroll
3.内层的width必须大于外层的width,且正好可以把滚动条给遮住
4.内层height:100%,才能滚动起来
