js中
点击打开菜单这一块就不写了。
下拉菜单记得设置样式 user-select:none以及$(document).bind("selectstart", function () { return false; })以免文字被选中导致一直触发mousedown事件;
scroll_box是最外层容器,screen_ul是列表容器,screen_ul是列表项。
//记录滑动高度
var scrollstart, scrollheight, scrollend, scrolling_distant = 0;
var pc_scrollstart, pc_scrollheight, pc_crollend, pc_scrolling_distant = 0;
//监听滑动事件
endheight=0;$('.scroll_box').on('touchstart', function (e) {
e.preventDefault();
var touch = e.originalEvent.targetTouches[0];
scrollstart = touch.pageY;
console.log('scrollstart=' + scrollstart);
});
$('.scroll_box').on('touchmove', function (e) {
e.preventDefault();
var touch = e.originalEvent.targetTouches[0];
scollheight = touch.pageY;
scrollend = scollheight - scrollstart;
console.log('scollheight=' + scollheight);
console.log('scrollend=' + scrollend);
var standposition = endheight + scrollend;
console.log(standposition);
var endheightpx = standposition + 'px';
$(this).find('.screen_ul').css({ 'transform': 'translate3d(0px,' + endheightpx + ', 0px)', 'transition-timing-function': 'cubic-bezier(0.25, 0.46, 0.45, 0.94)', 'transition-duration': '400ms' });
});
$('.scroll_box').on('touchend', function (e) {
e.preventDefault();
var scrollend = scollheight - scrollstart;
endheight += scrollend;
var endlimit = $(this).find('.screen_ul').height() - $(this).height();
if (endheight + endlimit < 0) {
endheight = -endlimit;
var bottompx = '-'+endlimit + 'px';
$(this).find('.screen_ul').css({ 'transform': 'translate3d(0px,' + bottompx + ', 0px)', 'transition-timing-function': 'cubic-bezier(0.25, 0.46, 0.45, 0.94)', 'transition-duration': '400ms' });
}
if (endheight > 0) {
endheight = 0;
$(this).find('.screen_ul').css({ 'transform': 'translate3d(0px,0px, 0px)', 'transition-timing-function': 'cubic-bezier(0.25, 0.46, 0.45, 0.94)', 'transition-duration': '400ms' });
}
});
//监听鼠标按住事件,以兼容pc端
var down, flag = false,showul,showdiv;
$('.scroll_box').on('mousedown', function (touch) {
showul = $(this).find('.screen_ul').height();
showdiv = $(this).height();
console.log(showul + ' ' + showdiv);
console.log(showul);
flag = true;
pc_scrollstart = touch.pageY;
console.log('pc_scrollstart=' + pc_scrollstart);
down = setTimeout(function () {
$('.scroll_box').on('mousemove', function (e) {
pc_scollheight = e.pageY;
pc_scrollend = pc_scollheight - pc_scrollstart;
var standposition = endheight + pc_scrollend;
var endheightpx = standposition + 'px';
$(this).find('.screen_ul').css({ 'transform': 'translate3d(0px,' + endheightpx + ', 0px)', 'transition-timing-function': 'cubic-bezier(0.25, 0.46, 0.45, 0.94)', 'transition-duration': '400ms' });
});
$(document).mouseup(function (e) {
flag = false;
clearTimeout(down);
$('.scroll_box').off('mousemove');
var pc_scrollend = pc_scollheight - pc_scrollstart;
endheight += pc_scrollend;
var endlimit = showul - showdiv;
console.log(endheight);
console.log(endlimit);
if (endheight + endlimit < 0) {
endheight = -endlimit;
clearTimeout(down);
console.log(endlimit);
console.log(endheight);
var bottompx = '-' + endlimit + 'px';
$(this).find('.screen_ul').css({ 'transform': 'translate3d(0px,' + bottompx + ', 0px)', 'transition-timing-function': 'cubic-bezier(0.25, 0.46, 0.45, 0.94)', 'transition-duration': '400ms' });
}
if (endheight >= 0) {
endheight = 0;
$(this).find('.screen_ul').css({ 'transform': 'translate3d(0px,0px, 0px)', 'transition-timing-function': 'cubic-bezier(0.25, 0.46, 0.45, 0.94)', 'transition-duration': '400ms' });
}
});
}, 100);
});
//防止文本被选中而导致mousedown一直被触发
$(document).bind("selectstart", function () { return false; });