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);
})