水平滚动条不滚动

Question

我可能错过了一些非常简单的东西，但我无法让它发挥作用！我的基础是这个问题 - Horizontal scrolling div using buttons

不向左或向右滚动。

我也遇到了这个错误：

此外，当点击链接页面重新加载/跳转时，有没有办法解决这个问题？

                <div id="imgThumbs" class="scroller" style="height:97px;width: 306px; overflow: hidden; white-space: nowrap;">
                    <a href="#" id="left-button">Left</a>  
                    <a href="#" id="right-button">Right</a>
                    <div id="contentScroller">                         
                    <?php $counter = 1; while(the_repeater_field('images')): ?>                     
                        <a href="#" style="text-decoration:none!IMPORTANT;color:white!IMPORTANT;" class="showImg">
                            <img class="image-<?php echo $counter; ?>" src="<?php echo the_sub_field('image'); ?>" width="90" height="68" alt="<?php echo the_title(); ?> <?php echo $counter; ?>" />
                        </a>
                    <?php $counter++; endwhile; ?>
                    </div>
                </div>

                <script>
                jQuery(document).ready(function ($) {
                        $('#right-button').click(function {
                            $('#contentScroller').animate({
                            marginLeft: -="306px"
                            }, "fast");
                        });
                        $('#left-button').click(function {
                            $('#contentScroller').animate({
                            marginLeft: +="306px"
                            }, "fast");
                        });                     
                    });
                    </script>

更新

我刚刚发现了其他内容......即使内容结束，您也可以左右滚动。因此，如果有6个图像，则显示前3个，单击右键，显示下3个，单击右键，滚动到空白区域，再次单击，依此类推。有没有办法解决这个问题？

Answer 1

在您的点击处理程序中，function {应为function() {。

marginLeft: -="305px"不正确。 - =需要在引号内。 marginLeft:"-=305px"

<强>更新

我没有对此进行测试，但基本上你需要做的就是确保在做动画之前你不在左边或右边。您可能需要对您的应用程序进行一些修改，但它应该为您提供基本的想法。

jQuery(document).ready(function ($) {
    $('#right-button').click(function() {
        if($('#contentScroller').css('marginLeft') > 0){
            $('#contentScroller').animate({
                marginLeft: "-=306px"
                }, "fast");
             });
         }

    $('#left-button').click(function() {
         if($('#contentScroller').css('marginLeft') < -1 * $('#contentScroller').width()){
            $('#contentScroller').animate({
                marginLeft: "+=306px"
                }, "fast");
            });                     
         }
    });
});