工具函数之JS

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 scroll
15         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 scroll
21         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‘: scrollY
30     };
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

总结项目中经常用到的通用工具函数。

工具函数之JS,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。