【问题标题】:How to check the scroll bar status is already at top or at end?如何检查滚动条状态是否已经在顶部或末尾?
【发布时间】:2019-09-25 17:32:02
【问题描述】:

当用户设置“overflow:auto;”时显示滚动条并且用户可以从上到下滚动内容。问题是,javascript/jquery 如何检查滚动条是在底部还是在顶部?这样

if (is_scrollbar_top || is_scrollbar_end)
//do some thing..

那么有什么功能/方法可以检查这种状态吗?谢谢

更新:不工作 - 使用 jquery ui 对话框

html:

<div class = "dialog" id="dialog" title="Past Issues"></div>

javascript:

$('#pastIssues').click(function (event) {
            var issueString = 'product=Headline&year=2012&month=12';
            $('.issues,#issuesBox').remove();
            var dWidth = $(window).width() * 0.9; 
            var dHeight = $(window).height() * 0.9;

            $( "#dialog" ).dialog({
                    height: dHeight,
                    width: dWidth,
                    modal: true,
                    draggable: false, 
                    resizable: false,
            });

            get_past_issues(issueString,2012,12,event.type);
            return false;
        }); 

【问题讨论】:

  • 如果$(window).scrollTop() 为零,则在顶部,如果与document.heigh - window.height 相同,则在底部。
  • @adeneo 将此作为答案发布!
  • resizable: false 后面多了一个逗号...是复制粘贴错误吗...?
  • @A.V 不会引起问题

标签: javascript jquery html scroll scrollbar


【解决方案1】:

HTML:

<div id="mydiv" style="overflow: auto; height: 500px"></div>

脚本:

$(document).ready(function()
{
    $("#mydiv").scroll(function()
    {
        var div = $(this);
        if (div[0].scrollHeight - div.scrollTop() == div.height())
        {
            alert("Reached the bottom!");
        }
        else if(div.scrollTop() == 0)
        {
            alert("Reached the top!");
        }
    });
});

【讨论】:

    【解决方案2】:

    检查

    if($(window).scrollTop() == 0 || $(window).scrollTop() == $(document).height()- $(window).height()) {
       // do something
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-02-21
      • 1970-01-01
      • 1970-01-01
      • 2019-04-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-09-28
      相关资源
      最近更新 更多