transform: translateXで移動させるとoverflow: autoのスクロールが効かず要素が消えてしまう

Question

件名の通りの状態になってしまいます。対処法はありますでしょうか？

<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>

<a href="javascript:void(0);">次へ</a>

<div class="slide">
  <ul class="list">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
  </ul>
</div>

jQuery(function($){
    $('a').on('click', function(){
        //$('.slide').animate({scrollLeft: 200}, 600);
        //$('.list').css({'transform': 'translate3D(-200px, 0, 0)'});
        $('.list').css({'transform': 'translateX(-200px)'});
    });
});

.slide {
  width: 500px;
  margin: 0 auto;
  overflow: auto;
}
.list {
  width: 1000px;
}
.list li {
  float: left;
  width: 200px;
}

Answer 1

スクロールを操作してみては。

jQuery(function($){
    $('a').on('click', function(){
        $('.slide').get( 0 ).scrollLeft += 200;
    });
});
```**動くサンプル：**[https://jsfiddle.net/5j6das3o/](https://jsfiddle.net/5j6das3o/)

---

【Element.scrollLeft - Web APIs | MDN】
[https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft)

【element.scrollLeftプロパティ - JavaScript（ジャバスクリプト）リファレンス】
[http://alphasis.info/2013/08/javascript-dom-elementobject-scrollleft/](http://alphasis.info/2013/08/javascript-dom-elementobject-scrollleft/)

Comments

[退会済みユーザー]

kei344さん、ご回答ありがとうございます。animateでscrollLeftで動かすとガタツクので、translateで動かしたいのですが、無理なんでしょうか。

[kei344]

translateやmarginで動かすと元の要素からはみ出ることになるので、スクロール位置と合わなくなるのは当然かと思います。

translateでアニメーションした後translateを元に戻してスクロール位置を変えるくらいでしょうか。

[退会済みユーザー]

ご回答ありがとうございます。そうなんですね。。ちょっといじってみます。