关于css3+jq的不出现滚动条的下拉菜单

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; });