【踩坑】网站浏览器兼容适配

这篇文章是在测试网站的视差动效部分（详情可以看这里），在safari上测试的时候，完全无法实现滚动

在一行一行输出测试的时候，最终发现了一个大问题。。

在safari中$('html').scrollTop()部分输出一直为0

这就导致了代码根本无法检测滚动距离

在查资料之后才发现，原来这个部分在safari中需要使用$('body').scrollTop()进行读取

然后在网上有着一种判断浏览器的方法：$.browser.safari，对于这种方法我并没有实验成功

于是找了各种资料都无法实现这个判断

我测试了一下，确认了在chrome（win）下其读取到的$('body').scrollTop()值一直为0，而在safari下，其读取到的$('html').scrollTop()值为0。

因此我想到，直接将两个相加不就好了，不做判断，反正两个正好是互补的（我好聪明 bushi

文件scroll.js

var totalPicNum = 64;
var movePX = 600;
function scrollEvent(e) {
-    const scrollTop = $('html').scrollTop();
+    const scrollTop = $('html').scrollTop()+$('body').scrollTop(); // Chrome读取html， safari读取body 两者另一个都是0，所以直接相加
    let newAsset = '';
    if (scrollTop > startOpen && scrollTop < startOpen + movePX) {
        console.log("scrollTop: " + scrollTop);
        console.log("startOpen: " + startOpen);
        console.log(scrollTop > startOpen && scrollTop < startOpen + movePX);
        let offset = Math.floor((scrollTop - startOpen) / movePX * totalPicNum);
        console.log("offset: " + offset);
        if (offset < 1) {
            offset = 1;
        } else if (offset > totalPicNum) {
            offset = totalPicNum;
        }
        if (offset < 10) {
            newAsset = `large_000${offset}`;
        } else if (offset < 100) {
            newAsset = `large_00${offset}`;
        } else {
            newAsset = `large_0${offset}`;
        }
        $('#pic1').attr('src', '/source/img/roll/' + newAsset + '.jpg');
    }
}
startOpen = $('#imgWrapper').offset().top + (window.innerHeight / 2 + $('#picBox').height() / 2);
document.addEventListener('scroll', scrollEvent, true);