Javascript 在jQuery中创建水平滚动

我在一个div中有一个水平卷轴，它的宽度比子卷轴的宽度小

我用CSS使之成为可能

div {
  width: 300px;
  overflow: auto;
}

div p {
  width: 600px;
}

和HTML：

<div>
  <p>
  this is very looooooooooong text and very loooonggg paragraph
  </p>
</div>

似乎

$（窗口）。滚动
不会启动

我创建了JSFIDLE：

如何触发该事件以及如何向左/向右移动滚动取决于鼠标滚动的方向？
使用鼠标滚轮事件检测鼠标滚轮滚动。。请查收

jQuery

$(document).ready(function(){
var i=0;
     $(document).on('mousewheel', function(e){
    if(e.originalEvent.wheelDelta /120 < 0) {
   console.log('down');
   $('.scl').scrollLeft(i++);
    }
    else{
     console.log('up');
     $('.scl').scrollLeft(i--);
    }

    });
});

$（文档）.ready（函数（）{
var i=0；
$（文档）.on（'mouseweell'，函数（e）{
如果（例如原始事件车轮增量/120<0）{
console.log（'down'）；
$（'.scl'）。向左滚动（i++）；
}
否则{
console.log（'up'）；
$（'.scl'）。向左滚动（i-）；
}
});
});

注意：如果要滚动快一点，请将“i”的值再增加一点

更新

我添加了代码来阻止I的值超过div的宽度并低于0，还使滚动速度加快请检查此
而不是scrollTop（）在小提琴中使用ScrollLeft我们无法向上或向下滚动。。。使用鼠标滚轮事件向上或向下滚动文件希望这就是您的想法：）
$(document).ready(function(){
var i=0;
     $(document).on('mousewheel', function(e){
    if(e.originalEvent.wheelDelta /120 < 0) {
   console.log('down');
   $('.scl').scrollLeft(i++);
    }
    else{
     console.log('up');
     $('.scl').scrollLeft(i--);
    }

    });
});