Question

我有这个div，我想自动滚动，这是代码：

＆＃13;

.testimonial-group > .row {
  overflow-x: auto;
  white-space: nowrap;
}
.testimonial-group > .row > .col-xs-4 {
  display: inline-block;
  float: none;
}

/* Decorations */
.col-xs-4 { color: #fff; font-size: 48px; padding-bottom: 20px; padding-top: 18px; }
.col-xs-4:nth-child(3n+1) { background: #c69; }
.col-xs-4:nth-child(3n+2) { background: #9c6; }
.col-xs-4:nth-child(3n+3) { background: #69c; }

＆＃13;

<div class="container testimonial-group">
  <div class="row text-center">
    <div class="col-xs-4">1</div><!--
 --><div class="col-xs-4">2</div><!--
 --><div class="col-xs-4">3</div><!--
 --><div class="col-xs-4">4</div><!--
 --><div class="col-xs-4">5</div><!--
 --><div class="col-xs-4">6</div><!--
 --><div class="col-xs-4">7</div><!--
 --><div class="col-xs-4">8</div><!--
 --><div class="col-xs-4">9</div>
  </div>
</div>

＆＃13;

我想让它自己水平滚动。
任何帮助？

Answer 1

您可以使用jquery和scrollLeft()函数来实现，例如：

    <style>
     .testimonial-group > .row {
      overflow-x: auto;
      white-space: nowrap;
      float:left;
    }
    .testimonial-group > .row > .col-xs-4 {
     float: left;
    }
    . testimonial-group > .row >  .text-center {
    position: fixed;
      bottom: 30px;
      left: 50px;
    }
    </style>

    <script>

    $(window).on('load', function(){
     $('body').animate({
        scrollLeft: $("div").offset().left - 100
      }, 700);
    });

    </script>

如何自动水平滚动div？

1 个答案: