有没有办法强制用户滚动到div的底部？ [英] Is there a way to force a user to scroll to the bottom of a div?

问题描述

我不需要自动滚动到div的底部，而是强制用户自己滚动。我有一份法律协议，我真的希望别人阅读。可以使用常规JS或jQuery吗？

解决方案

我以前必须这样做，这就是我做的工作在几个浏览器中：

  function disclaimerFunction（）{
 $（。AcknowledgeOuterDiv）。scroll（function（） {
 var outerDiv = $（this）; 
 var innerDiv = $（> .AcknowledgeInnerDiv，$（this））; 
 var ScrollMod = 1; 
 if（ outerDiv.offset（）。top< innerDiv.outerHeight（））{
 ScrollMod = -1; 
} 
 if（Math.round（（ScrollMod * innerDiv.offset（）。top ）+ outerDiv.height（）+ outerDiv.offset（）。top）> = innerDiv.outerHeight（）&& Math.abs（innerDiv.offset（）。top）！= 0）{
 $ （.AcknowledgeCheckBox input）。attr（disabled，false）; 
 $（this）.unbind（scroll）; 
} else {
 $（.Acknowledge CheckBox输入）。attr（disabled，true）; 
} 
}）; 
} 
  

CSS：

  .AcknowledgeOuterDiv 
 {
 float：left; 
宽度：100％; 
身高：300px; 
溢出：auto; 
} 
 .AcknowledgeInnerDiv 
 {
 float：left; 
} 
  

HTML：

 < div class =AcknowledgeOuterDiv> 
< div class =AcknowledgeInnerDiv> 
很多文字
< / div> 
< / div> 
< span class =AcknowledgeCheckBox> 
< input id =MainContent_AcknowledgeCheckBoxtype =checkboxdisabled =disabled> 
< label for =MainContent_AcknowledgeCheckBox> *我已阅读并理解上述免责声明。< / label> 
< / span> 
  

编辑：
添加了滚动时启用的复选框到底。

I don't need to auto-scroll to the bottom of a div, rather force the user to scroll there themselves. I've got a legal agreement that I'd actually like people to read. Possible using regular JS or jQuery?

解决方案

I've had to do this before, this is what I did to make it work in several browsers:

function disclaimerFunction() {
            $(".AcknowledgeOuterDiv").scroll(function() {
                var outerDiv = $(this);
                var innerDiv = $(">.AcknowledgeInnerDiv", $(this));
                var ScrollMod = 1;
                if (outerDiv.offset().top < innerDiv.outerHeight()) {
                    ScrollMod = -1;
                }
                if (Math.round((ScrollMod * innerDiv.offset().top) + outerDiv.height() + outerDiv.offset().top) >= innerDiv.outerHeight() && Math.abs(innerDiv.offset().top) != 0) {
                    $(".AcknowledgeCheckBox input").attr("disabled", false);
                    $(this).unbind("scroll");
                } else {
                    $(".AcknowledgeCheckBox input").attr("disabled", true);
                }
            });
        }

CSS:

.AcknowledgeOuterDiv
{
    float: left;
    width: 100%;
    height: 300px;
    overflow: auto;
}
.AcknowledgeInnerDiv
{
    float: left;
}

HTML:

<div class="AcknowledgeOuterDiv">
      <div class="AcknowledgeInnerDiv">
           A lot of text
      </div>
</div>
<span class="AcknowledgeCheckBox">
    <input id="MainContent_AcknowledgeCheckBox" type="checkbox" disabled="disabled">
    <label for="MainContent_AcknowledgeCheckBox">*I have read and understand the above disclaimer.</label>
</span>

EDIT: Added the checkbox that gets enabled when scrolled to the bottom.

这篇关于有没有办法强制用户滚动到div的底部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！