将滚轮与水平滚动一起使用答案

【问题标题】：Using Scroll Wheel with Horizontal Scroll将滚轮与水平滚动一起使用
【发布时间】：2016-11-30 17:46:26
【问题描述】：

我对网页设计比较陌生。我在我的设计中使用 PHP、HTML、CSS 和 JQuery。我创建了一个滚动图像查看器，其中图像作为内联块。高度固定为屏幕的 100%，因此不应使用垂直滚动条。我允许在 x 方向滚动，以便用户可以水平滚动图像。

这一切都有效，但是滚轮什么也不做。无论如何，我可以将鼠标的垂直滚动输入转换为水平滚动吗？

CSS：

    .photoViewer {
    white-space: nowrap;
    height: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    padding-top: 50px;

}

.photoViewer li {

   display: inline-block;
   height: 100%;
    padding: 0;
}

.photoViewer li img{
    height: 100% ;
    width: auto;
    margin-right: 10px;
}

【问题讨论】：

@freedomn-m 这不正是他新人的原因吗？要回答你的问题，是的，有可能，javascript/jquery
@freedomn-m 您链接的第一篇文章提供了一些网站示例，这些网站完全按照我的要求做，并且做得很好。

标签： php jquery html css

【解决方案1】：

有一个名为jQuery Mousewheel 的jQuery 插件可以帮助您完成此任务。 CSS 技巧的 Chris Coyier 在他的示例 here 中使用了它，它基本上将 Y 轴滚动转换为 X 轴滚动：

// Code by Chris Coyier
$(function() {
    $("body").mousewheel(function(event, delta) {
        this.scrollLeft -= (delta * 30);
        event.preventDefault();
    });
});

【讨论】：

【解决方案2】：

您可以使用wheel 事件并将deltaY 转换为X。

基本上：

$(".inner").on("wheel", function() { 
    var outer = $(this).closest(".outer");
    outer.scrollLeft(outer.scrollLeft() + e.originalEvent.deltaY);
    e.preventDefault();
});

但这有点跳跃，所以你可以添加一个动画 - 如果动画时间过长，测试会使这个非常笨重，因此是 exta .stop()。

您可能可以使用 css 过渡获得更好的动画/更平滑的滚动。

$("#inner").on("wheel", function(e) {
  var outer = $(this).closest("#outer")
  //outer.scrollLeft(outer.scrollLeft() + e.originalEvent.deltaY)
  outer.stop(false,false).animate({scrollLeft:"+="+e.originalEvent.deltaY}, 50)
  e.preventDefault();
});

#outer {
  display:block;
  width:200px;
  height:100px;
  overflow-y:hidden;
  overflow-x:scroll;
  border:1px solid red
}
#inner {
  display:block;
  width: 500px;
  height:100px;
  border:1px solid blue;
  background: blue;
  background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='outer'>
<div id='inner'>
</div>
</div>

（显然不要使用 mousehweel，因为它是非标准的 - 可能是 jquery 为您处理）。

【讨论】：