html - 滚动区域内的 Div 被滚动离开

Question

我有一个可滚动区域和按钮 < >使其滚动。
我需要那些按钮的 span在主 div ( spinAreaDiv) 内，它们不会被滚动。

问:我错过了什么？ ( fiddle here )我试过 span与 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)

Answer 1

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

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

( test )

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

#spinAreaDiv {
  position: relative;
}

最好将滚动内容移动到另一个具有滚动宽度和高度的 DIV 中，然后将按钮放在那里。 Example .