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/

使水平滚动网站在移动设备上运行

1 个答案: