工具函數之JS

標籤：style   blog   color   os   io   for   cti   div   

1. 判斷元素是否有捲軸

 1 /* 2 1. 瀏覽器在沒有捲軸的時候，scrollLeft/scrollTop賦值後不會發生變化，始終是0； 3 2. scrollLeft，scrollTop為負數值時會報錯 4 */ 5 var scroll = function (elm) { 6     var elms = elm ? [elm] : [document.documentElement, document.body], 7         scrollX = false, 8         scrollY = false, 9         i, len, tmp, obj;10 11     for (i = 0, len = elms.length; i < len; i++) {12         obj = elms[i];13 14         //Test horizontal scroll15         tmp = obj.scrollLeft;16         obj.scrollLeft += (tmp > 0) ? -1 : 1;17         obj.scrollLeft !== tmp && (scrollX = scrollX || true);18         obj.scrollLeft = tmp;19 20         //Test vertical scroll21         tmp = obj.scrollTop;22         obj.scrollTop += (tmp > 0) ? -1 : 1;23         obj.scrollTop !== tmp && (scrollY = scrollY || true);24         obj.scrollTop = tmp;25     }26 27     return {28         ‘isScrollX‘: scrollX,29             ‘isScrollY‘: scrollY30     };31 };

 

2. 擷取瀏覽器捲軸寬度 

 1 /* 2 1. 向頁面插入一個看不到的元素，並設定它的寬度w，自身顯示捲軸； 3 2. 瀏覽器捲軸的寬度 = w - 它的clientWidth 4 */ 5 var getScrollWidth = function () { 6     var testNode, tmp; 7  8     testNode = document.createElement(‘div‘); 9     testNode.style.cssText = "position:absolute;width:50px;height:50px;top:-1000px;overflow-y:scroll;";10     document.body.appendChild(testNode);11 12     tmp = testNode.clientWidth;13     document.body.removeChild(testNode);14     return 50 - tmp;15 };

 

.Thinking

總結項目中經常用到的通用工具函數。