好久前寫的代碼,3種模式,如今發出來與你們分享,其實這塊的思路還有須要些優化,望你們來優化探討ios
// 左右側滾動 (左右兩邊DIV高度不肯定,獲取左右兩邊DIV高度,左側高於右側,則右側浮動,不然,左側滾動) function HomeScroll(a,b){if((navigator.userAgent.match(/(iPhone|iPad|iPod|Android|ios)/i))){return}var c=$(a),d=$(b);if(c.length>0&&d.length>0){function g(){var g=$(window).scrollLeft(),h=$(window).scrollTop(),i=$(document).height(),j=$(window).height(),k=c.height(),l=d.height(),e=d.offset().top,f=c.offset().top,m=k>l?f:e,n=k>l?d:c,o=k>l?c.offset().left+c.outerWidth(!0)-g:d.offset().left-c.outerWidth(!0)-g,p=k>l?l:k,q=k>l?k:l,r=parseInt(q-j)-parseInt(p-j);$(a+","+b).removeAttr("style"),j>i||p>q||m>h||p-j+m>=h?n.removeAttr("style"):j>p&&h-m>=r||p>j&&h-m>=q-j?n.attr("style","margin-top:"+r+"px;"):n.attr("style","_margin-top:"+(h-m)+"px;position:fixed;left:"+o+"px;"+(j>p?"top":"bottom")+":0;")}$(window).resize(g).scroll(g).trigger("resize")}} // 左側滾動 (明確右邊DIV高於左側,則左側浮動) function HomeScrollL(a,d){if((navigator.userAgent.match(/(iPhone|iPad|iPod|Android|ios)/i))){return}var e=$(a),c=$(d);if(e.length>0&&c.length>0){function f(){var m=$(window).scrollLeft(),n=$(window).scrollTop(),k=$(document).height(),h=$(window).height(),g=e.height(),j=c.height(),b=c.offset().top,l=c.offset().left-e.outerWidth(!0)-m,i=parseInt(j-h)-parseInt(g-h);if(k<h||g>j||n<b||n<=g-h+b){e.removeAttr("style")}else{if(h>g&&(n-b)>=i||h<g&&(n-b)>=(j-h)){e.attr("style","margin-top:"+i+"px;")}else{e.attr("style","_margin-top:"+(n-b)+"px;position:fixed;left:"+l+"px;"+(h>g?"top":"bottom")+":0;")}}}$(window).resize(f).scroll(f).trigger("resize")}}; // 右側滾動 (明確左側DIV高於右側,則右側浮動) function HomeScrollR(a,d){if((navigator.userAgent.match(/(iPhone|iPad|iPod|Android|ios)/i))){return}var e=$(a),c=$(d);if(e.length>0&&c.length>0){function f(){var m=$(window).scrollLeft(),n=$(window).scrollTop(),k=$(document).height(),h=$(window).height(),g=e.height(),j=c.height(),b=e.offset().top,l=e.offset().left+e.outerWidth(!0)-m,i=parseInt(g-h)-parseInt(j-h);if(k<h||j>g||n<b||n<=j-h+b){c.removeAttr("style")}else{if(h>j&&(n-b)>=i||h<j&&(n-b)>=(g-h)){c.attr("style","margin-top:"+i+"px;")}else{c.attr("style","_margin-top:"+(n-b)+"px;position:fixed;left:"+l+"px;"+(h>j?"top":"bottom")+":0;")}}}$(window).resize(f).scroll(f).trigger("resize")}};
左右側滾動調用:HomeScroll(「Mid_L」,"Mid_R")
左側滾動調用:HomeScrollL(「Mid_L」,"Mid_R")
右側滾動調用:HomeScrollR(「Mid_L」,"Mid_R")
js中作了特殊狀況處理,好比ipad平板,浮動會有問題,直接就不浮動了,裏面有爲了更好的兼容IE6等,使用了margin-top方式,若是不考慮IE9如下瀏覽器,這代碼還能夠精簡,寫起來更簡單明瞭瀏覽器