Question

所以，我在div中得到了一些数据。它按日期分成几块。它使用jQuery和mousewheel插件水平滚动。

当div到达终点时（最左边，最右边），我需要触发一个事件。我认为通过检测在mousewheel插件中获取的数据，可以通过当前实现的方式来计算何时无法进一步滚动。我只需要朝着正确的方向轻推。这是为我进行水平滚动的代码：

$(document).ready(function () {        
    $('#timeline').mousedown(function (event) {
        $(this)
            .data('down', true)
            .data('x', event.clientX)
            .data('scrollLeft', this.scrollLeft);
        return false;
    }).mouseup(function (event) {
        $(this).data('down', false);
    }).mousemove(function (event) {
        if ($(this).data('down') == true) {
            this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
        }
    }).mousewheel(function (event, delta) {
        this.scrollLeft -= (delta * 30);
    }).css({
        'overflow' : 'hidden',
        'cursor' : '-moz-grab'
    });
});

有人可以给我指点吗？谢谢！

Answer 1

嘿，我已经为您准备了一个实施页面。您可以看到如何使用jQuery检测滚动区域的结尾。

对于整个文档，您必须在javascript中检测.scrollTop是否已等于.scrollHeight。使用jQuery可以检测：

if ( $(document).scrollTop() == ( $(document).height() - $(window).height() ) {
  // Do something here ...
}

宽度也是如此。请查看div here 的示例。

Answer 2

这是您想要的代码。事实证明它适用于IE，Safari，Chrome，Firefox等。

这是HTML部分。

    <div id="slide-wrap" style="width:1000px; height:200px; overflow:hidden; padding:0 auto;">
        <div id="inner-wrap" style="float:left;">
            <!-- 'Put Inline contains here like below.' -->
            <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div>
            <!--  ...  -->
            <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div>
            <!-- 'Put Inline contains here like above.' -->
        </div>
        <div style="display: block; width:40px; height:60px; position: absolute; margin-left:0px;   margin-top:40px">
            <img id='scroll_L_Arrow' src='../assets/img/l-arrow.png' onclick="scrollThumb('Go_L')"/>
        </div>
        <div style="display: block; width:40px; height:60px; position: absolute; margin-left:960px; margin-top:40px">
            <img id='scroll_R_Arrow' src='../assets/img/r-arrow.png' onclick="scrollThumb('Go_R')"/>
        </div>
    </div>

这是JavaScript函数中的jQuery部分。

    function scrollArrowShow() {
        var maxScroll = ($('#inner-wrap').width() - $('#slide-wrap').scrollLeft()) - $('#slide-wrap').width();
        if ( 0 == $('#slide-wrap').scrollLeft()) {
            $('#scroll_L_Arrow').css({visibility: 'hidden'});
        }else{
            $('#scroll_L_Arrow').css({visibility: 'visible'});
        }
        if ( 0 == maxScroll) {
            $('#scroll_R_Arrow').css({visibility: 'hidden'});
        }else{
            $('#scroll_R_Arrow').css({visibility: 'visible'});
        }
    }

       function scrollThumb(direction) {
        if (direction=='Go_L') {
            $('#slide-wrap').animate({
                scrollLeft: "-=" + 250 + "px"
            }, function(){
                // createCookie('scrollPos', $('#slide-wrap').scrollLeft());
                scrollArrowShow();
            });
        }else
        if (direction=='Go_R') {
            $('#slide-wrap').animate({
                scrollLeft: "+=" + 250 + "px"
            }, function(){
                // createCookie('scrollPos', $('#slide-wrap').scrollLeft());
                scrollArrowShow();
            });
        }
       }

Answer 3

private void txtBoxDefaultEnglish_DragDrop(object sender, DragEventArgs e)
{
    //Get index from dropped location
    int selectionIndex = txtBoxDefaultEnglish.GetCharIndexFromPosition(txtBoxDefaultEnglish.PointToClient(new Point(e.X, e.Y)));
    string textToInsert = string.Format(" [{0}]", (string)e.Data.GetData(DataFormats.Text));
    txtBoxDefaultEnglish.Text = txtBoxDefaultEnglish.Text.Insert(selectionIndex, textToInsert);
    txtBoxDefaultEnglish.SelectionStart = txtBoxDefaultEnglish.Text.Length;

    //Set cursor start position
    txtBoxDefaultEnglish.SelectionStart = selectionIndex;
    //Set selction length to zero
    txtBoxDefaultEnglish.SelectionLength = 0;
}

使用jQuery检测水平滚动div的结束

3 个答案: