由于容器隐藏横向滚动条后，移动端横向滚动效果不受影响，但是pc端是无法通过鼠标进行横向滚动，因此需要自己手动实现效果。
draggable="false"，通过设置draggable，是可以设置html不允许拖拽效果，通过拖拽可以初步实现pc端横向滚动行为。- draggable的兼容性是最好html属性
- css样式
-webkit-user-drag: none;也可以实现类似效果，兼容性不太好，移动效果大部份都有效
user-select:属性可以设置是否允许用户选择页面中的图文内容mousedown和mouseup：通过设置鼠标事件，实现鼠标按下后，坐标位置不一样，让容器调用scrollto就可以实现滚动效果。wheel：通过滚动事件，在容器内滚动滚轴可以横向滚动getboundingclientrect，记录每个图标的x位置，通过前后位置是否变化，如果不变化,鼠标单击的时候就可以触发单击事件。因为mousedown事件发生也会触发click事件
class scroller {
init() {
this.setdragwheelevent(".gameshow");
this.setdragscrollevent(".gameshow");
this.initclick();
}
throttle(fn, wait) {
let inthrottle, lastfn, lasttime;
return function () {
const context = 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) {
const gameshowele = document.queryselector(selector);
gameshowele.addeventlistener("wheel", (event) => {
event.preventdefault();
gameshowele.scrollleft += event.deltay;
});
}
setdragscrollevent(selector) {
const gameshowele = document.queryselector(selector);
let left = 0;
let oldleft = 0;
const move = this.throttle((event) => {
let x = 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() {
return window.navigator.useragent.match(
/(phone|pad|pod|iphone|ipod|ios|ipad|android|mobile|symbian|windows phone)/i
);
}
initclick() {
const imgspaceeles = document.queryselectorall(".imgspace");
if (imgspaceeles) {
const xaarry = [];
array.from(imgspaceeles).foreach((imgspaceele, index) => {
const href = 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) => {
const ele = imgspaceeles[i];
const site = ele.getboundingclientrect();
xaarry[i] = site.x
})
})
})
}
}
}
window.onload = () => {
const scroller = new scroller()
scroller.init();
}
<style>
.gamemenu {
overflow: hidden;
margin: 0 auto;
height: 100%;
}
.gamemenu>div {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
box-sizing: border-box;
margin: auto;
padding: 10px 10px 0 10px;
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(0 0 0 / 16%) 0 0 10px 0;
}
.navigationstyle {
display: flex;
overflow: hidden;
position: relative;
justify-content: center;
align-items: center;
padding: 0 1px;
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>
<div class="gamemenu" style="width: 320px">
<div>
<div class="games">
<div id="navigationstyle" class="navigationstyle">
<div class="gameshow" draggable="false" style="cursor: pointer;">
<div class="imgspace" url="/game/crazy-ball/play" title="crazy-ball">
<div style="position: relative">
<div
style="width: 60px; height: 60px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 9px 5px 0px; background-image: url("https://res.minigame.vip/gc-assets/crazy-ball/crazy-ball_icon.webp"); background-position: center center; background-repeat: no-repeat; background-size: contain;">
</div>
</div>
</div>
<div class="imgspace" url="/game/mutant-dino/play" title="mutant-dino">
<div style="position: relative">
<div
style="width: 60px; height: 60px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 9px 5px 0px; background-image: url("https://res.minigame.vip/gc-assets/mutant-dino/mutant-dino_icon.webp"); background-position: center center; background-repeat: no-repeat; background-size: contain;">
</div>
</div>
</div>
<div class="imgspace" url="/game/plants-beatzombies/play" title="plants-beatzombies">
<div style="position: relative">
<div
style="width: 60px; height: 60px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 9px 5px 0px; background-image: url("https://res.minigame.vip/gc-assets/plants-beatzombies/plants-beatzombies_icon.webp"); background-position: center center; background-repeat: no-repeat; background-size: contain;">
</div>
</div>
</div>
<div class="imgspace" url="/game/queen-hulahoop/play" title="queen-hulahoop">
<div style="position: relative">
<div
style="width: 60px; height: 60px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 9px 5px 0px; background-image: url("https://res.minigame.vip/gc-assets/queen-hulahoop/queen-hulahoop_icon.webp"); background-position: center center; background-repeat: no-repeat; background-size: contain;">
</div>
</div>
</div>
<div class="imgspace" url="/game/popstone2/play" title="popstone2">
<div style="position: relative">
<div
style="width: 60px; height: 60px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 9px 5px 0px; background-image: url("https://res.minigame.vip/gc-assets/popstone2/popstone2_icon.webp"); background-position: center center; background-repeat: no-repeat; background-size: contain;">
</div>
</div>
</div>
<div class="imgspace" url="/game/ninja-sword/play" title="ninja-sword">
<div style="position: relative"></div>
<div
style="width: 60px; height: 60px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 9px 5px 0px; background-image: url("https://res.minigame.vip/gc-assets/ninja-sword/ninja-sword_icon.webp"); background-position: center center; background-repeat: no-repeat; background-size: contain;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
- 最终实现的效果,如下图：
到此这篇关于css3手动实现pc端横向滚动的文章就介绍到这了,更多相关css3 pc端横向滚动内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
声明：如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
