关于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;

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