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}

溢出问题：我无法解释这一点，所以请删除溢出：隐藏形式 div：#chars_con 并查看效果.. 我想做extaly，就像我们没有溢出：隐藏一样。但我想保留此属性，因为我想对此应用滚动效果

滚动问题：当我将鼠标悬停并滚动时，我想滚动这个 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}'/>

然后在 mouseover 上附加一个 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 回答