您正在使用IPV4(35.168.110.128)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】多款云产品1折起,买云服务器送免费机器,最长免费续3个月      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 中秋节 21
2022年 国庆节 42
2023年 元 旦 134
2023年 春 节 155
 
本类新增
本类热门文章
您现在的位置:首页 >> 脚本程序 >> 内容
css3手动实现pc端横向滚动
内容摘要: 由于容器隐藏横向滚动条后,移动端横向滚动效果不受影响,但是pc端是无法通过鼠标进行横向滚动,因此需要自己手动实现效果。draggable='false',通过设置draggable,是可以设置html不允许拖拽效果,通过拖拽可以初步实现pc端横向滚动行为。draggable的兼容性是最好HTML属性css样式-webkit-user-drag:none;也可......
由于容器隐藏横向滚动条后,移动端横向滚动效果不受影响,但是pc端是无法通过鼠标进行横向滚动,因此需要自己手动实现效果。

draggable="false",通过设置draggable,是可以设置html不允许拖拽效果,通过拖拽可以初步实现pc端横向滚动行为。

draggable的兼容性是最好HTML属性

css样式-webkit-user-drag:none;也可以实现类似效果,兼容性不太好,移动效果大部份都有效

user-select:属性可以设置是否允许用户选择页面中的图文内容

mousedown和mouseup:通过设置鼠标事件,实现鼠标按下后,坐标位置不一样,让容器调用scrollTo就可以实现滚动效果。

wheel:通过滚动事件,在容器内滚动滚轴可以横向滚动

getBoundingClientRect,记录每个图标的x位置,通过前后位置是否变化,如果不变化,鼠标单击的时候就可以触发单击事件。因为mousedown事件发生也会触发click事件

classScroller{

init(){

this.setDragWheelEvent(".gameShow");

this.setDragScrollEvent(".gameShow");

this.initClick();

}

throttle(fn,wait){

letinThrottle,lastFn,lastTime;

returnfunction(){

constcontext=this,args=arguments;

if(!inThrottle){

fn.apply(context,args);

lastTime=Date.now();

inThrottle=true;

}else{

clearTimeout(lastFn);

lastFn=setTimeout(function(){

if(Date.now()-lastTime>=wait){

fn.apply(context,args);

lastTime=Date.now();

}

},Math.max(wait-(Date.now()-lastTime),0));

}

};

}

setDragWheelEvent(selector){

constgameShowEle=document.querySelector(selector);

gameShowEle.addEventListener("wheel",(event)=>{

event.preventDefault();

gameShowEle.scrollLeft+=event.deltaY;

});

}

setDragScrollEvent(selector){

constgameShowEle=document.querySelector(selector);

letleft=0;

letoldLeft=0;

constmove=this.throttle((event)=>{

letx=left+(oldLeft-event.clientX)

if(x<0)x=0;

gameShowEle.scrollTo(x,0)

},100)

gameShowEle.addEventListener('mousedown',function(event){

gameShowEle.style.cursor='grabbing';

gameShowEle.style.userSelect='none';

oldLeft=event.clientX;

left=gameShowEle.scrollLeft;

document.addEventListener('mousemove',move)

});

document.addEventListener('mouseup',function(){

gameShowEle.style.cursor='pointer';

gameShowEle.style.removeProperty('user-select');

document.removeEventListener('mousemove',move)

})

}

isMobile(){

returnwindow.navigator.userAgent.match(

/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|Symbian|WindowsPhone)/i

);

}

initClick(){

constimgSpaceEles=document.querySelectorAll(".imgSpace");

if(imgSpaceEles){

constxAarry=[];

Array.from(imgSpaceEles).forEach((imgSpaceEle,index)=>{

consthref=imgSpaceEle.getAttribute("url");

let{x}=imgSpaceEle.getBoundingClientRect();

xAarry.push(x);

imgSpaceEle.addEventListener("click",()=>{

let{x:newx}=imgSpaceEle.getBoundingClientRect();

if(xAarry[index]==newx||this.isMobile()){

alert(href)

}

xAarry.forEach((m,i)=>{

constele=imgSpaceEles[i];

constsite=ele.getBoundingClientRect();

xAarry[i]=site.x

})

})

})

}

}

}

window.onload=()=>{

constscroller=newScroller()

scroller.init();

}

<style>

.gameMenu{

overflow:hidden;

margin:0auto;

height:100%;

}

.gameMenu>div{

display:flex;

flex-direction:column;

justify-content:center;

align-content:center;

box-sizing:border-box;

margin:auto;

padding:10px10px010px;

border-top-left-radius:10px;

border-top-right-radius:10px;

width:320px;

height:100%;

background:#fff;

}

.games{

border-radius:10px;

width:100%;

height:90px;

box-shadow:rgb(000/16%)0010px0;

}

.navigationStyle{

display:flex;

overflow:hidden;

position:relative;

justify-content:center;

align-items:center;

padding:01px;

width:100%;

height:100%;

}

.gameShow{

display:flex;

overflow-x:scroll;

align-items:center;

width:inherit;

height:90px;

cursor:pointer;

}

.gameShow::-webkit-scrollbar{

display:none;

}

.imgSpace{

margin:5px;

width:60px;

height:60px;

}

</style>

<divclass="gameMenu"style="width:320px">

<div>

<divclass="games">

<divid="navigationStyle"class="navigationStyle">

<divclass="gameShow"draggable="false"style="cursor:pointer;">

<divclass="imgSpace"url="/game/crazy-ball/play"title="crazy-ball">

<divstyle="position:relative">

<div

style="width:60px;height:60px;border-radius:5px;box-shadow:rgba(0,0,0,0.16)0px9px5px0px;background-image:url(&quot;https://res.minigame.vip/gc-assets/crazy-ball/crazy-ball_icon.webp&quot;);background-position:centercenter;background-repeat:no-repeat;background-size:contain;">

</div>

</div>

</div>

<divclass="imgSpace"url="/game/mutant-dino/play"title="mutant-dino">

<divstyle="position:relative">

<div

style="width:60px;height:60px;border-radius:5px;box-shadow:rgba(0,0,0,0.16)0px9px5px0px;background-image:url(&quot;https://res.minigame.vip/gc-assets/mutant-dino/mutant-dino_icon.webp&quot;);background-position:centercenter;background-repeat:no-repeat;background-size:contain;">

</div>

</div>

</div>

<divclass="imgSpace"url="/game/plants-beatzombies/play"title="plants-beatzombies">

<divstyle="position:relative">

<div

style="width:60px;height:60px;border-radius:5px;box-shadow:rgba(0,0,0,0.16)0px9px5px0px;background-image:url(&quot;https://res.minigame.vip/gc-assets/plants-beatzombies/plants-beatzombies_icon.webp&quot;);background-position:centercenter;background-repeat:no-repeat;background-size:contain;">

</div>

</div>

</div>

<divclass="imgSpace"url="/game/queen-hulahoop/play"title="queen-hulahoop">

<divstyle="position:relative">

<div

style="width:60px;height:60px;border-radius:5px;box-shadow:rgba(0,0,0,0.16)0px9px5px0px;background-image:url(&quot;https://res.minigame.vip/gc-assets/queen-hulahoop/queen-hulahoop_icon.webp&quot;);background-position:centercenter;background-repeat:no-repeat;background-size:contain;">

</div>

</div>

</div>

<divclass="imgSpace"url="/game/popstone2/play"title="popstone2">

<divstyle="position:relative">

<div

style="width:60px;height:60px;border-radius:5px;box-shadow:rgba(0,0,0,0.16)0px9px5px0px;background-image:url(&quot;https://res.minigame.vip/gc-assets/popstone2/popstone2_icon.webp&quot;);background-position:centercenter;background-repeat:no-repeat;background-size:contain;">

</div>

</div>

</div>

<divclass="imgSpace"url="/game/ninja-sword/play"title="ninja-sword">

<divstyle="position:relative"></div>

<div

style="width:60px;height:60px;border-radius:5px;box-shadow:rgba(0,0,0,0.16)0px9px5px0px;background-image:url(&quot;https://res.minigame.vip/gc-assets/ninja-sword/ninja-sword_icon.webp&quot;);background-position:centercenter;background-repeat:no-repeat;background-size:contain;">

</div>

</div>

</div>

</div>

</div>

</div>

</div>

上一篇:html中两种获取标签内的值的方法 下一篇:基于JavaScript实现报警器提示音
发布日期:2022/6/28
手机扫二维码直达本页
发布时间:16:37:27
点击:95
录入:齐天大圣
相关文章
Baidu

YiJiaCMS 6.3.1.220701(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2022