5000px+ 宽水平滚动？

Question

我正在建立这个网站，关于这个页面我基本上有两个问题： http://sites.publishyours.com.br/silviamecozzi/pt/obra/deserto_das_palmas.php

在链接上，您会看到一些不同尺寸的“将是”图像以及它的图例。 其中一些图像将达到 1700 像素以上，这是第一个问题和问题。

检查 html 和 css，您会看到一个 id 为“gallery”的 div，其中包含所有图像。它是绝对定位的，我将其宽度设置为 4800 像素（不足以容纳所有向左浮动的图像。如果将此宽度更改为 5000 像素，则足以容纳所有图像，一切都会好起来的应该是这样，但是……

问题01： 为什么我需要设置 div#gallery 宽度？我会有其他类似的部分，具有不同的图像/尺寸，我无法预览它需要多宽。我只是希望它尽可能宽，如果我以后需要添加更多图像，我希望它可以根据需要尽可能宽。

问题02： 首先请注意我如何将“画廊”div 的左侧位置设置为-150px。 好吧，一旦我解决了第一个问题，我可能会将“html”标签设置为 {overflow-x:hidden; }。并使用与网站一样宽的水平滚动条（+- 920px），在图像的正下方，我希望图像从“隐藏的右侧”滚动（使用 jQuery 滚动条），例如 { left: 0px; } 到“隐藏的左侧”，例如 { left: -3980px; } 的浏览器，反之亦然，因为用户使用滚动...此滚动将需要计算#gallery div 的宽度和所有...有人可以指点我一个 jQuery 插件来帮助我做到这一点?我正在考虑 jscrollpane (http://jscrollpane.kelvinluck.com) 但我真的不知道它是否可行。

感谢您的帮助！

Answer 1

问题1：可以使用pre或nowrap来防止换行。只要您的html结构和css正确，您就不需要设置画廊宽度。

问题 2：您可以使用 jQuery 中的 scrollLeft 属性来显示元素。你不需要插件。

http://jsfiddle.net/3Tsfv/1

然后使用 scrollLeft 属性将下一个元素动画化到视图中。此示例不处理边框情况，因此如果您单击左/右太多次，它将中断。不过，您应该很容易根据自己的需要对其进行修改。

css

body { white-space:nowrap; overflow: hidden; padding: 10px; }
img { margin: 5px; border: 1px solid black; }
img.active { border-color: orange; }
div{ position: fixed; }​

html

<div><button id="left"><-</button><button id="right">-></button></div><br /><br />
<img class="active" src="http://placehold.it/500x100/" /><img src="http://placehold.it/750x100/" /><img class="active" src="http://placehold.it/300x100/" /><img class="active" src="http://placehold.it/1000x100/" />

jquery

$('#left').click(function() {
    var $prev = $('.active').prev();
    $('.active').removeClass('active');
    $prev.addClass('active');   
    $('body').animate( { scrollLeft: $prev.offset().left }, 'slow');
});

$('#right').click(function() {
    var $next = $('.active').next();
    $('.active').removeClass('active');
    $next.addClass('active');   
    $('body').animate( { scrollLeft: $next.offset().left }, 'slow');
});
​