web-dev-qa-db-fra.com

faites défiler jusqu'à ce que vous soyez en horizontal

J'ai une div horizontale:

horizontal div

j'ai besoin de faire défiler jusqu'à l'élément spécifique dans cette div via le bouton JavaScript (après le clic de div doit être fait défiler jusqu'à cet élément). Comment puis-je faire ceci?

<div class="group" id="frames">
<div class="item frames-item">
<img src="1.jpg">
</div>
<div class="item frames-item">    
<img src="2.jpg">
</div>
....
....
</div>
javascriptjqueryscroll
11
ysokolovsky

$ .scrollTo est votre ami:

$(container).scrollTo(target)
10
moonwave99

Ou vous pouvez utiliser l'extrait suivant: 

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

Où position() renvoie la position relative du #dstElement en «.scrollable» si scrollable est positionné.

Code et démo

    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"/>

32
Matyas

Essayez ci-dessous pour créer un élément ou un lien au centre sur un clic

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));
}
5
Amit

Le code ci-dessous devrait faire l'affaire:

  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>

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

Cela fonctionnera dans jqgrid ainsi que div 

2
Hemant

Si vous avez un élément qui a un défilement horizontal intérieur, vous pouvez procéder comme suit: Dans l'exemple suivant, deux flèches avec les classes utilisées font défiler l'élément sur les côtés.

Dans ce cas, j'ai avec la classe .tabs que je dois déplacer. Le 500 est le temps en millisecondes d’animer ce parchemin, vous pouvez donc avoir votre propre curseur.

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);

  });
1
Lukas Alarcon