0

我有一个可滚动的区域和按钮< >来让它滚动。
我需要将这些按钮span放在主 div ( spinAreaDiv) 内，而不会滚动它们。

问：我错过了什么？（在这里小提琴）我尝试了spanwith float，然后它们在里面spinAreaDiv但被滚动了......

HTML

<div id="spinAreaDiv"> 
<span id="leftclick" class="left">&nbsp; < &nbsp;</span>
<span id="rightclick" class="right">&nbsp; > &nbsp;</span>
<div class="spin-bullets">
    zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...
    zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz... 
    zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...
    zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...
    zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...zzzZZzzz...
</div>

JS：

spinAreaDiv = document.getElementById('spinAreaDiv');
scrollEff = new Fx.Scroll(spinAreaDiv, {
wait: false,
duration: 1000,
offset: {
    'x': 0,
        'y': 0
},
transition: Fx.Transitions.Quad.easeInOut
});

thumbLeft = document.getElementById('leftclick');
thumbRight = document.getElementById('rightclick');

thumbLeft.addEvent("click", function () {
scrollEff.start((spinAreaDiv.getScroll().x) - 400, 0);
});
thumbRight.addEvent("click", function () {
scrollEff.start((spinAreaDiv.getScroll().x) + 400, 0);
});

CSS：

#spinAreaDiv {
width:500px;
margin-left:10%;
overflow:auto;
height:60px;
background-color:grey;
}
span {
margin-top:20px;
background-color:red;
z-index:100;
}
span.right {position:absolute;right:0px;}
span.left {position:absolute;left: 0;}
.spin-bullets {
width:10000px;
height:35px;
padding-top:10px;
top:0px;
background-color:#066;
}

（使用 Mootools Fx.Scroll）

4

2 回答 2

1

我不熟悉“MooTools”，但您可以在滚动期间更改按钮的左/右偏移：

spinAreaDiv.addEvent('scroll', function(ev){
  thumbLeft.style.left = spinAreaDiv.getScroll().x + 'px';    
  thumbRight.style.right = (-spinAreaDiv.getScroll().x) + 'px';
});

（测试）

此外，您需要定位您的 spinArea：

#spinAreaDiv {
  position: relative;
}

将滚动内容移动到具有滚动宽度和高度的另一个 DIV 中并将按钮放在那里可能是一个更好的主意。例子。

于 2013-06-16T22:26:55.533 回答
0

您的跨度按钮应该位于#spinAreaDiv 之外，或者参考不滚动的父级的位置。
http://jsfiddle.net/53AMT/1/。如果将滑块包裹在 :anther div; 

#myslider {
    position:relative;
    z-index:1;
    width:500px;
    margin:auto;
}

他们可以躺在上面。

于 2013-06-16T22:27:53.327 回答