设置div的最大水平滚动答案

【问题标题】：Set max horizontal scroll of div设置div的最大水平滚动
【发布时间】：2012-10-26 10:38:30
【问题描述】：

我在下面有一个 jquery 图像滚动器，它只是水平向左/向右滚动。下面的循环可能包含无限数量的图像。

我遇到的问题是，虽然它可以很好地左右滚动，但一旦图像结束，你就可以继续滚动，所以基本上你只是在空白区域上滚动！

如何设置最大滚动，以便在图像结束时不再允许滚动？显然，图像的数量是动态的，因此其中可以有 1 或 100 个图像。

<div id="imgThumbs" class="scroller" style="position:relative;height:75px;width: 306px; overflow: hidden; white-space: nowrap;">
    <a href="#" id="left-button" style="left:14px;top:25px;position:absolute;">
        <img src="left-button.png" width="20" height="20" />
    </a>  
    <a href="#" id="right-button" style="right:14px;top:25px;position:absolute;">
        <img src="right-button.png" width="20" height="20" />                               
    </a>
    <div id="contentScroller">                         
    <?php $counter = 1; while(the_repeater_field('images')): ?>                     
        <a class="fancybox" rel="group" href="<?php echo the_sub_field('high_resolution_image'); ?>" 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>

更新

这是一个小提琴 - http://jsfiddle.net/jCskY/2/

【问题讨论】：

标签： javascript jquery html css dom

【解决方案1】：

将marginLeft 与由内容a 的宽度之和计算的宽度进行比较。

如果 margin 超过 width，它应该隐藏按钮。否则，它应该显示。

这里是它的实现方式。

Also, see this fiddle, for live example!

var updateRightLeftButtons = function() {
    if (306 > (parseInt($('#contentScroller').css('marginLeft')) * -1)) {
        $('#left-button').hide();
    } else {
        $('#left-button').show();
    }
    if ((($('#contentScroller a').width() * $('#contentScroller a').length) - 306) < (parseInt($('#contentScroller').css('marginLeft')) * -1)) {
        $('#right-button').hide();
    } else {
        $('#right-button').show();
    }
};
$('#right-button').click(function() {
    updateRightLeftButtons();
    if ($(this).is(':visible'))
    $('#contentScroller').animate({
        marginLeft: "-=306px"
    }, "fast", updateRightLeftButtons);
});
$('#left-button').click(function() {
    updateRightLeftButtons();
    if ($(this).is(':visible'))
    $('#contentScroller').animate({
        marginLeft: "+=306px"
    }, "fast", updateRightLeftButtons);
});
updateRightLeftButtons();

【讨论】：

谢谢。我尝试过，但它不允许任何滚动。当您说“可能需要更改”时，您的意思是什么？
调整何时必须隐藏。也许它应该是 0 而不是 updateRightLeftButtons 函数中的 306。如果你做了一个小提琴会更好的帮助。
好的，这是小提琴jsfiddle.net/jCskY。（希望我的小提琴是正确的）它现在不滚动。

【解决方案2】：

<?php
$dirname = '_/img/album';
$pattern = "/(\.jpg$)/i"; // valid image extensions
if (is_dir($dirname)) {
    if ($handle = opendir($dirname)) {
        $count = 0;
        while (false !== ($file = readdir($handle))) {
            // if this file is a valid image
            if (preg_match($pattern, $file)) {
                $count++;
            }
        }
        closedir($handle);
    }
}
?>

然后将计数乘以 20 并将值设置为 div 容器的宽度

【讨论】：