javascript - 水平滚动到，用wordpress acf

Question

我正在寻找一种水平滚动到我的内容栏的方法。
单击一列，我希望它向左移动。 I made a picture to explain better.

问题是:我正在使用 ACF 灵活内容，但我还没有找到将它与一些 javascript 库(如 Sly)相结合的方法。不工作。因为这个正在使用 ul list...

如何实现这种“滚动到”效果？

.article-atelier {
  width: 300px;
  height: 85vh;
  float: left;
  padding: 0px;
  margin: 0px;
  display: block;
  padding: 40px;
  padding-bottom: 400px;
  background-color: red;
  overflow-x: scroll;
  overflow-y: none;
}
.article-atelier:hover {
  background-color: gray
}
#ateliers-hori {
  width: 7000px;
  overflow-x: scroll;
  font-size: 20px;
  overflow-y: hidden;
  height: 85vh;
}
.titrage {
  background-color: gray;
  width: 300px;
  height: 80vh;
  font-size: 20px;
  float: left;
}
.titrage2 {
  font-size: 20px;
  text-align: center
}

<?php define( 'WP_USE_THEMES', false); require( './wp-load.php'); ?>

<?php /* Template Name: ateliers */ ?>


<?php get_header(); ?>



<div id="content">


  <?php if(have_posts()) : ?>
  <?php while(have_posts()) : the_post(); ?>


  <div id="ateliers-hori">

    <div class="titrage">
      <h4 class="titrage2"><?php the_field('titre_1'); ?></h4>
    </div>

    <?php // check if the flexible content field has rows of data if( have_rows( 'ateliers') ): ?>

    <?php while ( have_rows( 'ateliers') ) : the_row(); ?>


    <?php if( get_row_layout()=='atelieratelier' ):?>

    <div class="article-atelier">
      <h4 class="titrage2"><?php the_sub_field('atelier_01');?></h3>
						        	<?php the_sub_field('texte_atelier');?>
						        	</div>


						       <?php  endif;?>




						    <?php  endwhile;?>

						 <?php else :?>

						    // no layouts found

						<?php endif;

						?>




	<div class="titrage"><?php the_field('titre_2'); ?></div>




	<?php

	// check if the flexible content field has rows of data
	if( have_rows('ateliers') ):?>

	   <?php while ( have_rows('remise_a_niveau') ) : the_row();?>

	       <?php if( get_row_layout() == 'remiseaniveau' ):?>

	      


	       	<div class="article-atelier">
	          <h4 class="titrage2"> <?php the_sub_field('titre_remise');?></h4>
      <?php the_sub_field( 'texte_remise');?>
    </div>

    <?php endif;?>

    <?php endwhile;?>

    <?php else :?>// no layouts found

    <?php endif; ?>



    <?php endwhile; ?>

  </div>


  <?php include (TEMPLATEPATH . "/searchform.php"); ?>
  <?php endif; ?>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

</div>
<!-- fermeture div "page" -->
</body>

</html>

Answer 1

这看起来像一个前端开发任务，所以不需要向我们展示 PHP。

您尝试过使用 jQuery 吗？这是根据您的图片的一些简单示例:

$('.article').on('click', function () {

    $('html, body').animate({

        scrollLeft: $(this).offset().left + 'px'

    }, 1000);
    
    $('.article').removeClass('select');
    
    $(this).addClass('select');

});

body {
    width: 1100px;
}
.article {
    width: 100px;
    height: 200px;
    display: inline-block;
    background-color: red;
    cursor: pointer;
}
.article:hover, .article.select {
    background-color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>

按上面的“运行代码片段”或查看 fiddle here .