jQuery监听鼠标滚轮事件,通过鼠标滚轮可以做一些逻辑。
这里写了鼠标滚轮滚动控制元素的top值,实现鼠标滚轮滚动元素上下滚动。
html代码大致如下(主要是js代码)
<div id="table0" style="height: 500px; width: 500px;"><div id="tableCon" style="height: 1500px; width: 500px;">内容</div></div>
js代码:
$('#table0').css('position', 'relative');$('#tableCon').css({'position': 'absolute', 'top': '0' });$('#tableCon').on("mousewheel DOMMouseScroll", function (e) {var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie(e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox// 获取事件发生时元素的top值var topnum = Number($('#tableCon')[0].style.top.replace('px', ''))// 存放应该设置的元素的top值var topStr = '';if (delta > 0) {// 向上滚if (topnum + 20 >= 0) {topStr = '0px';} else {topStr = topnum + 20 + 'px';}} else if (delta < 0) {// 向下滚if (topnum - 20 <= -1000) {topStr = '-1000px';} else {topStr = topnum - 20 + 'px';}}$('#tableCon').css('top', topStr);});