Question

我正在尝试将滚动事件应用于元素之一

<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并看到效果..我想做的很像我们没有溢出：隐藏。但我想保留此属性，因为我想将滚动效果应用于此

滚动问题：我想在鼠标悬停时滚动此div并滚动

请问任何问题，因为我无法解释，但你可以从我在这里提到的代码中得到它

Answer 1

这是触摸屏式滚动的一个粗略示例：

<强>的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/

Answer 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");});

Here is a jsfiddle

仅滚动div和div溢出问题

2 个答案: