标签：event def 尺寸 compute navigator mouse fun 说明 emd
本篇如题，是对上一个鼠标滚动事件的扩充
具体扩充内容：
1.可以添加点击元素（control_up/control_down）来控制页面的滚动
2.可以选择触发方式（点击、滚轮滚动、点击和滚轮滚动）
//使用鼠标滚轮每次滚动浏览器大小的距离
//obj格式{touch: click||scroll||click&scroll, control_up: id, control_down: id}
//touch:什么触发方式，三个选项click/scroll/click&scroll；control_up:你的触发页面向上滚动的按钮id；control_down:你的触发页面向下滚动的按钮id
function windowScroll(id, number, direction, obj) {
var oHtml = document.documentElement;
//在IE8以下不支持使用class选取元素
var oContent = document.getElementById(id);
//获取文档的高度
var cHeight;
if(direction === "top" ) {
cHeight = oHtml.clientHeight;
}else if( direction === "left" ) {
cHeight = oHtml.clientWidth;
}
//用于控制鼠标每个多长时间才能让页面滚动设置的变量
var count = 1;
//用于添加触发点击事件的元素
if(obj.touch === "click" || obj.touch === "click&scroll"){
var oControl_up, oControl_down;
oControl_up = document.getElementById(obj.control_up);
oControl_down = document.getElementById(obj.control_down);
}
//在窗口尺寸改变的时候实时给cHeight赋值
window.onresize = function () {
if(direction === "top" ) {
cHeight = oHtml.clientHeight;
}else if( direction === "left" ) {
cHeight = oHtml.clientWidth;
}
};
if(window.addEventListener) {
//用于判断当前浏览器是否为FF
if( navigator.userAgent.toLowerCase().indexOf("firefox") !== -1 ) {
//滚动触发
if(obj.touch === "scroll") {
oHtml.addEventListener("DOMMouseScroll", function (e) {
//FF浏览器的滚动条滚动上下判断是与其它浏览器相反的，负值是向上滚动
if( count === 1 ) {
//滚轮向上滚动时
if( e.detail < 0 ) {
upRoll();
}
//e.detail是正值说明是想下滚动
else if( e.detail > 0 ) {
downRoll();
}
}
//阻止浏览器页面滚动的默认事件
e.preventDefault();
}, false);
} else if( obj.touch === "click" ) {
//点击触发的事件，下同
clickTouch();
}else if ( obj.touch === "click&scroll" ) {
oHtml.addEventListener("DOMMouseScroll", function (e) {
//FF浏览器的滚动条滚动上下判断是与其它浏览器相反的，负值是向上滚动
if( count === 1 ) {
//滚轮向上滚动时
if( e.detail < 0 ) {
upRoll();
}
//e.detail是正值说明是想下滚动
else if( e.detail > 0 ) {
downRoll();
}
}
//阻止浏览器页面滚动的默认事件
e.preventDefault();
}, false);
clickTouch();
}
} else {
if(obj.touch === "scroll") {
oHtml.addEventListener(‘mousewheel‘,function (e) {
var event = e || window.event;
//当count = 1 时让页面可以滚动
if( count === 1 ) {
//当鼠标向上滚动时
if( event.wheelDelta > 0 ) {
upRoll();
}
//当鼠标向下滚动时
if( event.wheelDelta < 0 ) {
downRoll();
}
}
//阻止浏览器滚动的默认事件，防止页面来回晃动
event.preventDefault();
}, {passive: false});
} else if( obj.touch === "click" ){
clickTouch();
} else if(obj.touch === "click&scroll"){
oHtml.addEventListener(‘mousewheel‘,function (e) {
var event = e || window.event;
//当count = 1 时让页面可以滚动
if( count === 1 ) {
//当鼠标向上滚动时
if( event.wheelDelta > 0 ) {
upRoll();
}
//当鼠标向下滚动时
if( event.wheelDelta < 0 ) {
downRoll();
}
}
//阻止浏览器滚动的默认事件，防止页面来回晃动
event.preventDefault();
}, {passive: false});
clickTouch();
}
}
} else if(window.attachEvent) {
if(obj.touch === "scroll") {
oHtml.attachEvent("onmousewheel",function(){
console.log(count);
if( count === 1 ){
//当鼠标向上滚动时
if( event.wheelDelta > 0 ) {
upRoll();
}
//当鼠标向下滚动时
if( event.wheelDelta < 0 ) {
downRoll();
}
}
//阻止浏览器滚动的默认事件，防止页面来回晃动
return false;
});
} else if ( obj.touch === "click" ) {
clickTouch();
} else if( obj.touch === "click&scroll" ) {
oHtml.attachEvent("onmousewheel",function(){
console.log(count);
if( count === 1 ){
//当鼠标向上滚动时
if( event.wheelDelta > 0 ) {
upRoll();
}
//当鼠标向下滚动时
if( event.wheelDelta < 0 ) {
downRoll();
}
}
//阻止浏览器滚动的默认事件，防止页面来回晃动
return false;
});
clickTouch();
}
}
//向上滚动时执行的函数
function upRoll(){
if( getElemProp(oContent, direction) >= 0 ) {
console.log("到顶了");
}
else {
elemDisplace(oContent, direction, 30, cHeight);
console.log(event.wheelDelta + ‘ , ‘ + getElemProp(oContent, direction) );
//如果鼠标不是在顶部往上滚动的话就将count++
count++;
setTimeout(function () {
//当过了1000ms后把count置为1，让页面可以继续滚动
count = 1;
}, 1000);
}
}
//向下滚动时执行的函数
function downRoll() {
//判断是否滚动到底部
if( getElemProp(oContent, direction) <= -number*cHeight ) {
console.log("到底了");
}
else {
elemDisplace(oContent, direction, -30, cHeight);
console.log(event.wheelDelta + ‘ , ‘ + getElemProp(oContent, direction) );
//如果鼠标不是在顶部往上滚动的话就将count++
count++;
setTimeout(function () {
//当过了1000ms后把count置为1，让页面可以继续滚动
count = 1;
}, 1000);
}
}
//给点击元素添加点击事件
function clickTouch(){
if(oControl_down && oControl_up){
eventBinding(oControl_up, ‘click‘, function(){
if( count === 1 ) {
upRoll();
}
});
eventBinding(oControl_down, ‘click‘, function(){
if( count === 1 ) {
downRoll();
}
});
} else {
alert("oControl_up或oControl_down未传入");
}
}
}
//获取元素属性
function getElemProp(elem, prop){
if(window.getComputedStyle){
return parseInt(window.getComputedStyle(elem, null)[prop]);
}else{
return parseInt(elem.currentStyle[prop]);
}
}
//给元素绑定事件
function eventBinding(elem, type, fn){
if(elem.addEventListener){
elem.addEventListener(type, fn, false);
}else if(elem.attachEvent){
elem.attachEvent(‘on‘ + type, function () {
fn.call(elem);
});
}else{
elem[‘on‘ + type] = fn;
}
}
//让元素加速运动
function elemDisplace(elem, direction, speed, distance){
//记录元素当前的位置
var origin = parseInt( getElemProp(elem, direction) );
var pos;
var Timer = setInterval(function(){
pos = parseInt( getElemProp(elem, direction) );
//判断元素是否位移到了指定的地方
if( Math.abs(pos - origin ) >= distance ){
if(speed > 0){
elem.style[direction] = origin + distance + ‘px‘;
}else {
elem.style[direction] = origin - distance + ‘px‘;
}
speed = 0;
clearInterval(Timer);
}else {
//判断元素的位移方向
if(speed > 0) {
speed++;
} else {
speed--;
}
elem.style[direction] = pos + speed + ‘px‘;
}
},15);
}
使用实例：
html结构:
<div id="content">
<div id="control_up"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div id="control_down"></div>
</div>
javascript下引用windowScroll方法
windowScroll("content", 4, "top", {touch:"click&scroll", control_up: "control_up", control_down: "control_down"});
原创文章
标签：event def 尺寸 compute navigator mouse fun 说明 emd
原文地址：https://www.cnblogs.com/hros/p/10941141.html
