1

要素の1つにスクロールイベントを適用しようとしています

<div style="position: fixed;width: 30px;height: 300px;overflow: hidden;left: 50%;margin-left: -15px;text-align: center" id="chars_con">
    <?php
    for($i = 97; $i <= 122; $i++){
    ?>
    <div class="chars" ch_to="<?php echo "chars$i"; ?>"><?php echo strtoupper(chr($i));?><div class="chars_a" id="<?php echo "chars$i"; ?>"><?php echo strtoupper(chr($i));?></div></div>
        <?php }
    ?>
</div>

私のJavaScript 

window.onload=function(){
        $(".chars").hover(function(){
            $("#"+$(this).attr("ch_to")).show();
        },function(){
            $("#"+$(this).attr("ch_to")).hide();
        });
        $("#chars_con").hover(function(){
            $("#chars_con").css({marginTop:$("#chars_con").scrollTop()});
        },function(){

        });
    }

css

div.chars{background-color: #66ccff;padding: 3px 7px;font-weight: bold;cursor: pointer}
    div.chars:hover{background-color: #990099;color: #ffffff}
    div.chars_a{background-color: #0000ff;color: #ffffff;border: 1px solid #ffff00;font-weight: bold;cursor: pointer;text-align: center;position: absolute;padding: 10px 15px;display: none;margin-left: -13px;margin-top: -25px;overflow: visible}

オーバーフローの問題：これを説明できないので、overflow：hiddenフォームdiv：#chars_conを削除して、効果を確認してください..オーバーフロー：hiddenがない場合と同じように実行したいと思います。しかし、これにスクロール効果を適用したいので、このプロパティを保持したい

スクロールの問題：マウスを置いてスクロールすると、このdivをスクロールしたい

説明できませんが、ここで説明したコードから取得できますので、質問してください。

4

2 に答える 2

0

これは、タッチスクリーン スタイルのスクロールの大まかな例です。

JavaScript/jQuery:

var last_pos = 0;
$(document).ready(function() {
    $('#scroll').mousemove(function(e) {
        if(e.clientY > last_pos) {
            $('#scroll').scrollTop($('#scroll').scrollTop() - 5);
        } else {
            $('#scroll').scrollTop($('#scroll').scrollTop() + 5);
        }
        last_pos = e.clientY;
    });
});

HTML:

<div id="scroll">
    This text will scroll.<br />
    Line 2<br />
    Line 3<br />
    Blah blah<br />
    This text will scroll.<br />
    This text will scroll.<br />
    This text will scroll.<br />
    Line ?<br />
    Line ?++<br />
    This text will scroll.<br />
    This text will scroll.<br />
</div>

CSS:

#scroll {
    width: 200px;
    height: 100px;
    overflow: hidden;
    background: #eee
}

例: http://jsfiddle.net/wEKhG/1/

于 2012-08-11T05:53:06.957 に答える
-2

あなたの問題についての私の理解から、スクロールを非表示にしたdivを持ち、スクロールバーにカーソルを合わせたときにのみスクロールバーを表示したいと思います。その場合は、次のように簡単な方法で行うことができます

<div id="division_to_scroll" style='{overflow:hidden}'/>

次に、マウスオーバー時にjqueryイベントを添付します

$('#division_to_scroll').mouseenter(function(){
$('#division_to_scroll').css("overflow", "scroll");}).mouseleave(function(){$('#division_to_scroll').css("overflow", "hidden");});​

ここにjsfiddleがあります

于 2012-08-11T05:39:02.643 に答える