Question

我有一个Scrollable区域和按钮< >以使其滚动我需要在主div（span）中放置那些按钮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

Answer 2

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

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

他们可以躺在那里。

滚动区域内的Div被滚动

2 个答案: