div设置overflow-scroll滚动之后,jq获取其子元素的offset.top出现问题。
先上个图:
布局很简单,左右超过屏幕的部分自行滚动。
1. html
<div class="ce-container"> <div class="ce-leftBox"> //左边的内容 </div> <div class="ce-rightBox"> //右边的内容 </div> </div>
2.css
.ce-container { background: white; width: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding-top: 50px; } .ce-container .ce-leftBox { float: left; width: 90px; height: 100%; border-right: 1px solid #F8F8F8; background: white; overflow-y: auto; text-align: center; } .ce-container .ce-rightBox { height: 100%; margin-left: 81px; overflow-y: auto; padding: 0 15px; }
说明重要点:
(1) container设置绝对定位top和bottom都要设置,再设置padding-top就能除开头部返回栏铺满整个屏幕。
(2) 左右两个盒子设置overflow-y:auto和高度100%,这样就可以不用js来设置高度,让div自行继承高度,并且超过能滚动了。
(3)左边盒子设置float,右边的盒子设置margin-left就能达到左边固定,右边自适应宽度的效果。这利用了float的破坏性,脱离文档流。
实现点击左边,右边滚动的思路:
在左边点击列表的时候,获取当前的索引值,然后,右边再通过该索引值,获取到对应部分的offset.top值,然后再设置右边div scrollTop就可以了。但是!!!问题就这样出现了。。。先来看看最初版的js
$('.ce-leftBox').on('click','.ce-leftItem',function(){ $(this).addClass('ce-lActive').siblings().removeClass('ce-lActive'); var idx=$(this).index(); var sTop=$('.ce-rightBox > .ce-rightItem').eq(idx).offset().top-50;//减50是去除头部返回栏的高度 $('.ce-rightBox').stop(true).animate({"scrollTop":sTop},400); })
来看看初版效果:
a. 问题出现:
???为什么会错乱???当没有设置 $('.ce-rightBox').stop(true).animate({"scrollTop":sTop},400); 这条语句的时候,获取到的sTop值是是正常的,但是加上这句话之后就出现了:点击会计类,sTop是0;点击工程类,sTop是321;点击医学类,sTop还是321???
b. 问题分析:
很明显,就是这条语句影响了结果,那为什么呢?难道是div内部滚动之后,会影响子元素获取offset.top的值?
果然,当第一次点击工程类的时候,右边div滚动了,这时候sTop的值是321,正常的,然后我再次点击工程类的时候,按道理来讲,sTop应该还是321,但是这时候,显示的结果是0。为什么会出现这种情况呢?
c. 原因分析:
原来是这样的
对于rightBox来说,它的顶部就是画箭头那点,那么当它滚动的时候,获取子元素offset.top的值即获取距离父级顶部的位置大小,就是获取子元素距离rightBox顶部的距离,所以当第一次点击工程类,右侧滚动之后,再次点击工程类,获取到sTop的值是0。
那为什么是0呢?那是因为:overflow-y 属性规定是否对内容的上/下边缘进行裁剪 - 如果溢出元素内容区域的话。相当于滚动的那部分被裁剪了,所以相当于第一次滚动之后,工程类的顶部就是紧挨着父级的顶部的。所以第一次正确获取,第二次已经滚动到rightBox顶部,再去获取就是0了。
d. 解决方案:
既然滚动的那部分被裁减不能算作内容,那么我每次都去获取滚动了多少,不就能正确获取正常的sTop的值了吗。最终版js
$('.ce-leftBox').on('click','.ce-leftItem',function(){ $(this).addClass('ce-lActive').siblings().removeClass('ce-lActive'); var idx=$(this).index(); var sTop=$('.ce-rightBox > .ce-rightItem').eq(idx).offset().top-50; var nowScrollTop=$('.ce-rightBox').scrollTop();//当前已经滚动了多少 $('.ce-rightBox').stop(true).animate({"scrollTop":sTop+nowScrollTop},400); })
最终效果图:
这样就正常了。。。
f. 扩展分析
那为什么其它需求需要整个window滚动的时候,每次获取到的offset.top都是正常的呢???我估计整个页面的滚动都不是overflow-y裁剪的那种滚动吧