0

スクロール可能な領域とスクロールするためのボタンがあります< >。
これらのボタンは、スクロールせずにspanメインの div () 内に配置する必要があります。spinAreaDiv

Q:何が欠けていますか? （ここでフィドルspan） withを試してみましたが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 に答える