function scroll(fn) { var beforeScrollTop = document.body.scrollTop, fn = fn || function() {}; window.addEventListener("ontouchmove", function() { var afterScrollTop = document.body.scrollTop, delta = afterScrollTop - beforeScrollTop; if (delta === 0) return false; fn(delta > 0 ? "down" : "up"); beforeScrollTop = afterScrollTop; }, false); }
2,sass转译
@function rem($n) { @return $n / 40 + rem; }
3,js判断鼠标上下滚动;
<script type="text/javascript"> var scrollFunc = function (e) { e = e || window.event; if (e.wheelDelta) { //判断浏览器IE,谷歌滑轮事件 if (e.wheelDelta > 0) { //当滑轮向上滚动时 alert("滑轮向上滚动"); } if (e.wheelDelta < 0) { //当滑轮向下滚动时 alert("滑轮向下滚动"); } } else if (e.detail) { //Firefox滑轮事件 if (e.detail> 0) { //当滑轮向上滚动时 alert("滑轮向上滚动"); } if (e.detail< 0) { //当滑轮向下滚动时 alert("滑轮向下滚动"); } } } //给页面绑定滑轮滚动事件 if (document.addEventListener) {//firefox document.addEventListener('DOMMouseScroll', scrollFunc, false); } //滚动滑轮触发scrollFunc方法 //ie 谷歌 window.onmousewheel = document.onmousewheel = scrollFunc; </script>
4,判断鼠标、滚动条上下滚动
var windowTop = 0; $(window).scroll(function() { var scrolls = $(this).scrollTop(); if(scrolls < 5 || scrolls <= windowTop) { // 向上滚动显示 console.log('向上') windowTop = scrolls; } else { // 向下滚动隐藏 console.log('向下') windowTop = scrolls; } });
5,设置页面加载时滚动条自动滚到底的方法:
window.onload = function(){ var h = document.documentElement.scrollHeight || document.body.scrollHeight; window.scrollTo(h,h); } $(function(){ var h = $(document).height()-$(window).height(); $(document).scrollTop(h); });
6,可以将HTML结构转换成字符串的函数;
function Dom2Str(fn) { return fn.toString().replace(/^[^/]+/*!?s?/, '').replace(/*/[^/]+$/, '').trim().replace(/>s*</g, '><'); } var str = Dom2Str(function(){ /* <a class="tab-item active" href="#"> <span class="icon icon-home"></span> <span class="tab-label">首页</span> </a> <a class="tab-item" href="#"> <span class="icon icon-me"></span> <span class="tab-label">我</span> </a> <a class="tab-item" href="#"> <span class="icon icon-star"></span> <span class="tab-label">收藏</span> </a> <a class="tab-item" href="#"> <span class="icon icon-settings"></span> <span class="tab-label">设置</span> </a> */ }); $('nav').append(str);
。