Question

i am trying to apply scroll event to one of element

<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>

my 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 issue : i am not able explain this so please remove overflow:hidden form div:#chars_con and see the effect .. i want to do extaly like when we don’t have overflow:hidden. but i want to keep this property because i want to apply scroll effect to this

Scroll issue: i want to scroll this div when i mouse hover it and do scroll

Please ask any question because i am not able to explain but you can get it from the code i mentioned here

Answer 1

This is a rough example of touchscreen-style scrolling:

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
}

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