Question

我有两段单独工作的代码，第一段允许拖拽标记类似于单元格的div，第二段导致容器div在按住鼠标时滚动区域和滚动区域中滚动。

一旦容器div开始滚动拖动标记停止工作，我就无法让它们一起工作。如果鼠标略微移动，它可以工作，所以我知道标签代码需要被触发，大概是从滚动码开始。

我尝试了各种各样的方式：

$('#xls_view').trigger('mouseover');

$(document).trigger('click');

创建行和标记事件代码：

xls.vals.push(vals);
$('#xls_view').append('<div style="background-color:#DDD; width:30px;" class="cell tag pen">'+xls.vals.length+'</div>');
$('#xls_view').children().last().attr('data-row', xls.vals.length);
for(var a=0;a<vals.length;a++) {
    $('#xls_view .cell:nth-last-child('+(vals.length+3)+')').css({'border-bottom':'none'});
    $('#xls_view').append('<div class="cell tag sel">'+vals[a]+'</div>');
    $('#xls_view').children().last().attr('data-row', xls.vals.length);
}
$('#xls_view .cell:nth-last-child('+(vals.length+3)+')').css({'border-bottom':'none'});
$('#xls_view').children().last().css({'border-right':'1px solid black'});
$('#xls_view').append('<div class="cell_end"></div>');

$('.tag').unbind().mousedown(function(e) {
    isMouseDown = true;
    if($(this).data('tagged')) {
        isTagged = false;
        $(this).data({tagged:false});
        $('.sel[data-row="'+$(this).data('row')+'"]').css({'background-color':'#EEE'});
    } else {
        isTagged = true;
        $(this).data({tagged:true});            
        $('.sel[data-row="'+$(this).data('row')+'"]').css({'background-color':'#9dd6ff'});
    }
}).mouseover(function () {
    if (isMouseDown) {
        if(isTagged) {
            $(this).data({tagged:true});
            $('.sel[data-row="'+$(this).data('row')+'"]').css({'background-color':'#9dd6ff'});
        } else {
            $(this).data({tagged:false});
            $('.sel[data-row="'+$(this).data('row')+'"]').css({'background-color':'#EEE'});
        }
    }
});

滚动代码：

$(document).mouseup(function () {
    isMouseDown = false;
}).mousedown(function () {
    isMouseDown = true;
    autoScroll();
}).mouseleave(function () {
    isMouseDown = false;        
}).mousemove(function(e) {
    mouse.x = e.pageX;
    mouse.y = e.pageY;
});

function autoScroll() {
    if(!isMouseDown)
        return;
    if((mouse.y > bottom_zone_start) && (mouse.y < bottom_zone_end)) {
        document.getElementById("xls_view").scrollTop += 10;
        // $('#xls_view').trigger('mouseover'); // - No luck
    } else if((mouse.y < top_zone_end) && (mouse.y > top_zone_start)) {
        document.getElementById("xls_view").scrollTop -= 10;
        // $('#xls_view').trigger('mouseover'); // - No luck
    }
    setTimeout(function() {
        autoScroll();
    },150);
}

注意：这与滚动条和鼠标滚轮无关。当鼠标位于顶部或底部区域时，以编程方式滚动容器。想想Excel，拖动标记单元格，靠近底部，以及页面为您滚动＃39;同时标记。它如此接近： - ）

Answer 1

您可以看到此代码，这将在鼠标滚动时发生。

此外，如果您只想检查鼠标向上和向下滚动的事件，则可以使用此脚本：

 // Firefox Browser
 $('#your-selector').bind('DOMMouseScroll', function(e){
     if(e.originalEvent.detail > 0) {
         //scroll down
     }else {
         //scroll up
     }
 });

 //IE, Opera, Safari Browser 
 $('#your-selector').bind('mousewheel', function(e){
     if(e.originalEvent.wheelDelta < 0) {
         //scroll down
     }else {
         //scroll up
     }
 });

＆＃13;

$( "p" ).clone().appendTo( document.body );
$( "p" ).clone().appendTo( document.body );
$( "p" ).clone().appendTo( document.body );
$( window ).scroll(function() {
  $( "span" ).css( "display", "inline" ).fadeOut( "slow" );
});

＆＃13;

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scroll demo</title>
  <style>
  div {
    color: blue;
  }
  p {
    color: green;
  }
  span {
    color: red;
    display: none;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>Try scrolling the iframe.</div>
<p>Paragraph - <span>Scroll happened!</span></p>
 
</body>
</html>

＆＃13;

JS - 如何将事件从滚动发送到鼠标悬停

1 个答案: