Question

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

Answer 1

我以前必须这样做，这就是我在几个浏览器中使用它所做的：

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>

修改添加了滚动到底部时启用的复选框。

Answer 2

如果底部有一个"accept"按钮，顶部有一个高可见性注释，他们需要滚动到底部以接受协议并继续向前。

在这样的情况下，你希望用户在继续之前接受，我不会依赖javascript，我会在没有javascript的情况下创建你想要的功能，只需添加javascript以进行渐进式增强（例如，或许是你确定要在没有按下接受按钮的情况下关闭页面时将此页面留下“消息”。

解决问题的其他方法：

提供legalese的人文纯文本摘要。
设计EULA（我猜是很好的），以便在眼睛上阅读并突出显示重要信息。
保持简短，所以它在合理的时间范围内实际上是可读的。
添加js增强功能，使其能够通读，例如可更改颜色的可点击元素。
尊重您的用户足以让他们 - 想要 - 阅读您的协议，而不是毫无意义地强迫他们这样做。

Answer 3

jQuery有一些插件，当元素滚动到视图中时会触发。

将元素放在许可协议的最底部;将该元素滚动到视图后激活“下一步”按钮。

Answer 4

我发现这个更好......对我而言

$.fn.isNearTheEnd = function() {
    // remember inside of $.fn.whatever = function() {}
    //   this is the jQuery object the function is called on.
    //   this[0] is DOMElement
    return this[0].scrollTop + this.height() >= this[0].scrollHeight;
};

// an example.
$("#content").bind("scroll", function() {
    if ($(this).isNearTheEnd()) // load some content
});

Load content as an element scrolls into view

Answer 5

如果您使用JavaScript或其他东西来检测它们何时到达底部，您仍然会让那些只是将滚动条移动到底部以跳过阅读的人。这是一个失败的原因，不要担心。如果他们注册，他们仍然必须遵守您的协议，无论他们是否阅读。

通过强制用户阅读协议，你只会让人们失去兴趣，而不是注册=访客减少，最终收入减少。

Answer 6

以下是如何制作更多内容的一种方法......确保用户已阅读协议，但我希望没有人会使用这样的方法：D为了我们所有人的利益。

body{
    width: 80;
    margin: 0 auto;
}
#header, #footer {
    height: 36px;
    background: green;
}
#container {
    background: #FAFAFF;
    width: 100%;
    height: 300px;
    overflow: hidden;
}
#tos {
    background: #AAAAFF;
    width: 80%;
    height: 800px;
    margin: 0 auto;
}
.ui-selected {
    background: red;
}
option {
    background: red;
}
option:hover {
    background-color: red;
    border: 1px solid gold;
    border-radius: 10px;
    color:red;
}
#more {
    position: absolute;
    bottom: 80px;
    left: 220px;
}

<body>
    <div id="header">Header</div>
    <div id="container">
        <div id="tos">
            long and boring terms of service
            <br/>
            Click "more" to read further, u must read all of it
            You cant click until xx time has passed
            <br/><br/><br/><br/><br/><br/>
            long and boring terms of service
            <br/>
            long and boring terms of service
            <br/><br/><br/><br/><br/>
            long and boring terms of service
            <br/>
            <br/><br/><br/><br/><br/>
            long and boring terms of service
            <br/>
            long and boring terms of service
            <br/><br/><br/><br/><br/>
            long and boring terms of service
            <br/>
            <br/><br/><br/><br/><br/>
            <input type="button" value="More" id="more" />
        </div>

    </div>
    <div id="footer">Footer</div>
    <input type="button" disabled="disabled" id="iveread" value="i have read the terms" />
</body>



var c = $("#container");
var m = $("#more");
c.data("scrollLv", 0);
m.click(function() {
    var s = c.data("scrollLv") + 120;
    c.data("scrollLv", s);
    c.scrollTop(s);
    m.prop("disabled", "disabled");
    setTimeout(function() {m.removeProp("disabled");}, 3000);
    if (s > 500) {
        m.remove();
        $("#iveread").removeProp("disabled");
    }
});

Js Fiddle sample

有没有办法强制用户滚动到div的底部？

6 个答案: