Question

我正在使用带有Navigator插件的jQuery Tool的Scrollable。

一些有用的链接：

最重要的是：a demo of how I'm using Scrollable/Navigator。

到目前为止运作良好。但我希望它表现得与众不同：

我希望图像（或者更确切地说，一般来说，<div class="items">中的元素）从Scrollable容器（我的演示中为<div class="slider">）“流出”直到浏览器窗口的右边界。
屏幕分辨率较高的人显然会看到更多的图片/项目流出容器，而不是分辨率较低的人。

如果这听起来令人困惑（可能会这样），这里有一些图片：

...然后当你点击右箭头滚动到下一张图片时：

好的，我猜是关于它的。感谢您阅读此内容！

任何帮助都将受到高度赞赏！提前谢谢！

Answer 1

更新3 - （在IE6，IE7，IE8，Chrome，Firefox中测试）

DEMO：

http://so.devilmaycode.it/jquery-tools-scrollable-navigator-items-flowing-out-of-the-container/

CSS：

（代表要更改/添加的内容）

*{margin:0;padding:0}
body,html{overflow:hidden}
#wrapper {
    height: 500px;
    width: 100%;
    overflow: hidden
}
.slider {
    margin: 50px auto;
    width: 3000px;
    overflow: hidden
}
.slider .items {
    top: 0;
    left: 0;
    width: 3000px;
    height: 400px;
    position: absolute;
    z-index: 1
}
a.browse{z-index:2}
a.prev{left:10px}
a.next{background-position:0 -30px;left:460px}
#navi{margin:10px 0 0 50px}

Answer 2

好吧，我觉得这很难像任何人一样相信，但这似乎至少在Chrome中有效：

的CSS：

body, html {
    overflow: hidden;
}
.slider {
    width: 6000px;
}
.next {
    left: 560px;
}

就是这样。我现在要看看它是否也适用于其他浏览器。

编辑：当然，IE6 / 7搞砸了，，除非网址中有#hash 。数据。添加以下代码，使其在任何地方，中心和所有地方都能正常工作。

div#wrapper {
    position: absolute;
    left: 50%;
    margin-left: -300px;
}

这是一个链接： http://nullenenenen.nl/12345_2.html

编辑2：

为确保您在浏览浏览器时尽可能长时间欣赏内容，请同时添加：

div#wrapper {
    top: 10%;
    margin-top: 0;
    overflow-y: auto;
}

我无法从现在的位置编辑在线版本，因此“编辑2”尚未应用于12345_2.html。

Answer 3

在width类的CSS中删除那些slider属性，然后指定margin-left使其在窗口左侧有一些空间，就像在演示中一样。但显然你需要调整导航（类next browse的锚点，使其左侧绝对位置（不像CSS中那样）。对于滑块下方的导航，你只需调整它就像通过添加margin-left具有相同值的滑块。

Answer 4

好的，假设您希望数字显示在右侧而不是左侧，这是您想要在页面上显示的唯一内容，您的主要问题是您不能拥有overflow: visible在右边但不在左边。怎么样这样伪装：

添加html（在滑块前添加div）：

<div id="wrapper">
    <div class="smokescreen"></div> <!-- added this -->
    <div class="slider">

添加css：

.slider {
    overflow: visible;
}
#wrapper {
    position: relative;
}
.smokescreen {
    position: absolute; 
    top: 0px; 
    left: -2000px; 
    width: 2000px; 
    height: 400px; 
    background: black; 
    z-index: 2;
}

这是一个链接：http://nullenenenen.nl/12345.html#

现在，额外的div随着包装器一起移动，遮挡了它左边的所有内容。当然，您可以根据需要更改“2000px”。

Answer 5

这是我能想到的最好的（对你已经存在的代码影响很小）。

CSS更改

/* Keep original CSS, just add these to their groups */
html, body {
  overflow-x: hidden !important;
}

.slider {
  overflow: visible !important;
}

Javascript Change

// Add in the .Scrollable({ ... }) tag
onSeek: function(o,e){
  $('.items').children().css('visibility','');
  $('.items').children().filter(':lt('+e+')').css('visibility','hidden');
}

当然，它不是即时的（就像它在一个物体或屏幕下滚动一样）但是它以极少的努力实现了你想要做的事情。

修改

添加了overflow-x以删除底部的水平滚动条。观察到工作：

FF4（测试版）

FF3（v3.6.13）

IE8（v8.0.7600.16385）

Chorome（v8.0.552.224）

Answer 6

有一个问题，.slider元素在屏幕上居中是必不可少的吗？

如果没有，你可以这样做：

#wrapper {
    margin: 100px 0 0 100px;
    width: auto; // or rather remove the width 
}
.slider {
    width: auto; // or 100%, or remove the width
}
a.next {
    left: 560; // remove the right: 10px;
}

我认为这涵盖了它。唯一的问题是，您可以使用#wrapper元素的左边距来定义左侧有多少空间。

jQuery工具：流出容器的可滚动/导航器项

6 个答案: