Question

我有一个包含三行文本的容器，每行超出了该容器的宽度，所以有一个水平滚动条，但是我将其隐藏了，我只想让此元素的滚动速度变慢。

这是一个小提琴： https://jsfiddle.net/ehp3qnty/576/

这是代码：

.parent {
  width: 400px;
  height: 200px;
  border: 1px solid #aaa;
  overflow: hidden;
}

.child {
  height: 100%;
  margin-bottom: -50px;
  /* maximum width of scrollbar */
  padding-bottom: 50px;
  /* maximum width of scrollbar */
  overflow-y: hidden;
  overflow-x: scroll;
}

p {
  white-space: nowrap;
}

<div class="parent">
  <div class="child">
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum.
    </p>
  </div>
  <!-- .child -->
</div>
<!-- .parent -->

制作速度较慢？

我需要一个没有任何插件/库的纯CSS / JS解决方案。

Answer 1

我相信有很多方法可以实现这一目标。一种简单的方法是使滚动更长，并设置内容相对于新滚动的位置。

HTML：

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

让w为容器宽度，s为内容宽度（或初始滚动宽度）。

如果我想使滚动f慢两倍，我必须使滚动f更长。滚动宽度将为s * f。

滚动结束时，scrollLeft将为s * f - w。并且内容的左侧必须为s * f - s。

因此比率将为(s * f - s) / (s * f - w)。

JavaScript：

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)`
})

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

请参见实时示例here。

Answer 2

$(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的水平滚动

2 个答案: