javascript - 使水平滚动网站在移动设备上工作

Question

我这里有这个代码:https://jsfiddle.net/enroxgfk/5/在向下滚动时横向滚动但不想在移动设备上工作。有没有办法修改我的代码来解决这个问题？

 <div id="container">
 <div id="objects">
  <div class="object"><img class="img" src="http://theauteurgroup.com/tape/img/keyboards.jpg"></div><div class="object"><img class="img" src="http://theauteurgroup.com/tape/img/amps3.jpg"></div><div class="object"><img class="img" src="http://theauteurgroup.com/tape/img/keyboards.jpg"></div><div class="object"><img class="img" src="http://theauteurgroup.com/tape/img/amps3.jpg"></div>

body {height:100%; margin:0; padding:0;}
#container {overflow-x:scroll;overflow-y:hidden;margin-bottom:-4px; height:100%;}
#objects {width: auto; white-space:nowrap; margin-bottom:-4px; height: 100%; }
.object {display: inline-block;height:100%;margin-bottom:-4px;}

$(function(){
    var h = $(window).height();
$('.img').css('height', h);
});

 var scroller = {};
scroller.e = document.getElementById("container");

if (scroller.e.addEventListener) {
scroller.e.addEventListener("mousewheel", MouseWheelHandler, false);
scroller.e.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else scroller.e.attachEvent("onmousewheel", MouseWheelHandler);

function MouseWheelHandler(e) {

// cross-browser wheel delta
var e = window.event || e;
var delta = - 20 * (Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))));

var pst = $('#container').scrollLeft() + delta;

if (pst < 0) {
    pst = 0;
} else if (pst > $('#objects').width()) {
    pst = $('#objects').width();
}

$('#container').scrollLeft(pst);

return false;
}

Answer 1

在 *#container 中添加 3 个属性。

#container {
width: 100vw;
display: flex;
flex-flow: row wrap;

您还需要在 javascript 中为手势(滑动)添加监听器。

更新的 JSfiddle:https://jsfiddle.net/enroxgfk/6/