html菜单横向滑动效果,[非js]用css实现移动端菜单横向滑动功能

test

body,p { margin:0; padding:0;}

.concent { margin:50px auto; width:100%; max-width:750px; min-width:320px; }

.box { white-space:nowrap; overflow-x:auto; }/*注释1*/

.box::-webkit-scrollbar { width:0; height:0; display: none; } /*注释2*/

.box div { list-style:none; display:inline-block; width:100px; line-height:30px; margin-right:10px;

background:#ccc; text-align:center; }/*注释3*/

.box p { width:100%; height:50px; background:pink; }

.box div:last-child { margin:0; }

简简单单

简简单单

简简单单

简简单单

简简单单

简简单单

var u = navigator.userAgent;

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端

var isUc = u.indexOf('UCBrowser') > -1; //uc浏览器

//var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

if(isAndroid&&isUc){/*注释5*/

$('.box').on('touchstart',function(){

$(document).on('touchmove',function(e){

e.preventDefault();

});

$(document).on('touchend',function(){

$(document).unbind();

});

});

}