Question

我对网页设计比较陌生。我在设计中使用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;
}

Answer 1

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

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

Answer 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过渡来实现更好的动画/更流畅的滚动。

＆＃13;

$("#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();
});

＆＃13;

#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); 
}

＆＃13;

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

＆＃13;

（显然不要使用mousehweel，因为它不合标准 - 可能是jquery会为你处理这个问题。）

使用带水平滚动的滚轮

2 个答案: