Scrollen Sie zu Element in horizontalem Div

Question 1

Ich habe ein horizontales div:

Ich muss über die JavaScript-Schaltfläche zu dem bestimmten Element in diesem Div scrollen (nach dem Klick muss Div zu diesem Element gescrollt werden). Wie kann ich das machen?

<div class="group" id="frames">
<div class="item frames-item">
<img src="https://stackoverflow.com/questions/17574628/1.jpg">
</div>
<div class="item frames-item">    
<img src="2.jpg">
</div>
....
....
</div>

Question 2

Oder Sie könnten das folgende Snippet verwenden:

$('.scrollable').animate({scrollLeft: $('#dstElement').position().left}, 500);

Wo position() gibt die zurück #dstElement‘s relative Position zu `.scrollable’, wenn scrollbar positioniert ist.

Code & Demo

    var $scroller = $('.scroller');
    // assign click handler
    $('button').on('click', function () {       
        // get the partial id of the div to scroll to
        var divIdx = $('input').val();          
        
        // retrieve the jquery ref to the div
        var scrollTo = $('#d'+divIdx)           
            // change its bg
            .css('background', '#9f3')          
            // retrieve its position relative to its parent
            .position().left;                   
        console.log(scrollTo);
        // simply update the scroll of the scroller
        // $('.scroller').scrollLeft(scrollTo); 
        // use an animation to scroll to the destination
        $scroller
          .animate({'scrollLeft': scrollTo}, 500);    
    });

    .scroller {
        width: 300px;
        height: 100px;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .container {
        position: relative; /*important for the .position() method */
        height: 100px;
        width: 770px;
    }
    .container div {
        height: 90px;
        width: 60px;
        float: left;
        margin: 5px;
        background: #39f;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroller">
        <div class="container">
            <div id="d1"></div>
            <div id="d2"></div>
            <div id="d3"></div>
            <div id="d4"></div>
            <div id="d5"></div>
            <div id="d6"></div>
            <div id="d7"></div>
           <!-- ... -->           
        </div>
    </div>
    <button>Scroll to: </button> <input type="text" value="4"/>

Question 3

$.scrollTo ist dein Freund:

$(container).scrollTo(target)

Question 4

Ohne jquery:

scrollTo (el) {
  const elLeft = el.offsetLeft + el.offsetWidth;
  const elParentLeft = el.parentNode.offsetLeft + el.parentNode.offsetWidth;

  // check if element not in view
  if (elLeft >= elParentLeft + el.parentNode.scrollLeft) {
    el.parentNode.scrollLeft = elLeft - elParentLeft;
  } else if (elLeft <= el.parentNode.offsetLeft + el.parentNode.scrollLeft) {
    el.parentNode.scrollLeft = el.offsetLeft - el.parentNode.offsetLeft;
  }
}

Question 5

Probieren Sie die folgende Funktion aus, um das Element oder Li beim Klicken in die Mitte zu bringen

function centerItVariableWidth(target, outer){
  var out = $(outer);
  var tar = $(target);
  var x = out.width();
  var y = tar.outerWidth(true);
  var z = tar.index();
  var q = 0;
  var m = out.find('li');
  //Just need to add up the width of all the elements before our target. 
  for(var i = 0; i < z; i++){
    q+= $(m[i]).outerWidth(true);
  }
  out.scrollLeft(Math.max(0, q - (x - y)/2));
}

Question 6

Der folgende Code sollte den Zweck erfüllen:

  document.addEventListener('DOMContentLoaded', function () {
      var frames = document.getElementById('frames');
      frames.addEventListener('click', function (e) {
          if (e.target.classList.contains('item')) {
              e.target.parentNode.scrollLeft = e.target.offsetLeft;

          }
      });
  });

        body {
            background: red;
        }
        .group{
            width: 300px;
            display: flex;
            position: relative; /* This is important for the js offsetLeft property */
            overflow-x: scroll;
        }
    
        .item{
            width: 200px;
            background: #eee;
            margin-right: 10px;
        }

    <div class="group" id="frames">
        <div class="item frames-item">paul</div>
        <div class="item frames-item">coucou</div>
        <div class="item frames-item">jojoij</div>
        <div class="item frames-item">zoie</div>
        <div class="item frames-item">foez</div>
        <div class="item frames-item">popze</div>
        <div class="item frames-item">kvk</div>
        <div class="item frames-item">poe</div>
        <div class="item frames-item">hfihuazf</div>
        <div class="item frames-item">jeeze</div>
        <div class="item frames-item">pposd</div>
        <div class="item frames-item">nvnn</div>
    </div>

Question 7

$(".ui-jqgrid-bdiv").scrollLeft(400);

Dies funktioniert sowohl in jqgrid als auch in div

Question 8

Wenn Sie ein Element haben, das ein inneres horizontales Scrollen hat, können Sie wie in meinem Beispiel vorgehen: Zwei Pfeile mit verwendeten Klassen scrollen das Element zu den Seiten.

In diesem Fall habe ich mit Klasse .tabs, die ich verschieben muss. Die 500 ist die Zeit in Millisekunden, um diese Schriftrolle zu animieren, sodass Sie Ihren eigenen Schieberegler haben können.

var scroll = 0;
  $('.js-move-list-right').click(function(){
    scroll = scroll + 400;
    $('#timeline .tabs').animate({scrollLeft: scroll}, 500);
  });
  $('.js-move-list-left').click(function(){
      scroll = scroll - 400;
      $('#timeline .tabs').animate({scrollLeft: scroll}, 500);

  });