Php 使用带水平滚动的滚轮

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

这一切工作，但滚轮什么也不做。我是否可以将鼠标的垂直滚动输入转换为水平滚动

CSS:

---

有一个jQuery插件可以帮助您完成这个任务。CSS tricks的Chris Coyier在他的示例中使用了它，该示例将Y轴滚动转换为X轴滚动：

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

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

基本上：

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

但是这有点不稳定，所以你可以添加一个动画-如果动画时间太长，测试会变得非常笨拙，因此exta

.stop（）

您可能会使用css转换实现更好的动画/更平滑的滚动

$（“#内部”）。在（“车轮”上，功能（e）{
var outer=$（此）
//outer.scrollLeft（outer.scrollLeft（）+e.originalEvent.deltaY）
outer.stop（false，false）.animate（{scrollLeft:“+=”+e.originalEvent.deltaY}，50）
e、 预防默认值（）；
});
#外部{
显示：块；
宽度：200px；
高度：100px；
溢出y：隐藏；
溢出-x：滚动；
边框：1px纯红
}
#内在的{
显示：块；
宽度：500px；
高度：100px；
边框：1px纯蓝色；
背景：蓝色；
背景：-webkit线性梯度（左、红、橙、黄、绿、蓝、靛、紫）；
背景：-o-线性梯度（左、红、橙、黄、绿、蓝、靛、紫）；
背景：-莫兹线性梯度（左、红、橙、黄、绿、蓝、靛、紫）；
背景：线性渐变（向右，红色，橙色，黄色，绿色，蓝色，靛蓝，紫色）；
}

@freedomn-m这不就是他新来的原因吗？要回答您的问题，是的，这是可能的，有了
javascript
/
jquery
@freedomn-m，您链接的第一篇文章给出了一些网站的例子，它们完全符合我的要求，并且做得很好。
$(".inner").on("wheel", function() { 
    var outer = $(this).closest(".outer");
    outer.scrollLeft(outer.scrollLeft() + e.originalEvent.deltaY);
    e.preventDefault();
});