Javascript 减慢div的水平滚动

我有一个包含3行文本的容器，每行都超过了该容器的宽度，因此有一个水平滚动条，但我隐藏了它，我只想让这个元素的滚动速度变慢

这是一把小提琴：

代码如下：

.parent{
宽度：400px；
高度：200px；
边框：1px实心#aaa；
溢出：隐藏；
}
.孩子{
身高：100%；
边缘底部：-50px；
/*滚动条的最大宽度*/
填充底部：50px；
/*滚动条的最大宽度*/
溢出y：隐藏；
溢出-x：滚动；
}
p{
空白：nowrap；
}

他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯特特·克里塔·卡斯德·古伯格伦，没有大海
圣殿是圣殿。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam和justo duo dolores和ea
再燃。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。
在vero eos和accusam以及justo duo dolores和ea Reum。


他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯特特·克里塔·卡斯德·古伯格伦，没有大海
圣殿是圣殿。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam和justo duo dolores和ea
再燃。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。
在vero eos和accusam以及justo duo dolores和ea Reum。


他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯特特·克里塔·卡斯德·古伯格伦，没有大海
圣殿是圣殿。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam和justo duo dolores和ea
再燃。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。
在vero eos和accusam以及justo duo dolores和ea Reum。

我相信有很多方法可以实现这一点。一个简单的方法是使卷轴变长，并设置内容相对于新卷轴的位置

HTML:

这可能不是一个完美的解决方案，但我希望这能有所帮助

---

请参阅实时示例。

如果没有任何插件，这是不可能的。检查用户如何滚动它？使用

shift+scroll

？@vrugtehagel，它适用于小型设备（手机），尝试按键盘箭头或使用响应模式并滑动元素。在这种情况下，我认为它取决于浏览器。您必须手动执行您想要支持的情况（例如，通过基于

touchmove

数据手动设置其位置来模拟刷卡，或者在按下箭头键时手动设置

margin left

或

left

属性）。嗯，jQuery是一个插件，他专门要求用纯JS（或CSS）回答

$(document).ready(function(){
    $('#your_div').hScroll(100); // You can pass (optionally) scrolling amount
});
Here goes the upgraded plugin jquery.hscroll.js:

jQuery(function ($) {
    $.fn.hScroll = function (amount) {
        amount = amount || 120;
        $(this).bind("DOMMouseScroll mousewheel", function (event) {
            var oEvent = event.originalEvent, 
                direction = oEvent.detail ? oEvent.detail * -amount : oEvent.wheelDelta, 
                position = $(this).scrollLeft();
            position += direction > 0 ? -amount : amount;
            $(this).scrollLeft(position);
            event.preventDefault();
        })
    };
});

<div class='container'>
  <div class='content'>
    <p>...</p>
    <p>...</p>
    <p>...</p>
  </div>
</div>

let f = 5
let s = container.scrollWidth

container.addEventListener('scroll', () => {
  let w = container.offsetWidth
  let r = (s * f - s) / (s * f - w)
  let x = container.scrollLeft
  content.style.transform = `translateX(${x * r}px)`
})