设置div的最大水平滚动

Posted 2023-05-09

【中文标题】设置div的最大水平滚动

【英文标题】：Set max horizontal scroll of 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"   />
    </a>  
    <a href="#" id="right-button" style="right:14px;top:25px;position:absolute;">
        <img src="right-button.png"   />                               
    </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'); ?>"    />
        </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/

【参考方案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 容器的宽度