代码之家 › 专栏 › 技术社区 › buley

是否有方法强制用户滚动到DIV的底部?

jquery javascript

buley · 技术社区 · 15 年前

我不需要自动滚动到DIV的底部,而是强制用户自己滚动到那里。我有一个法律协议,我真的想让人们读。是否可以使用常规JS或JQuery?

6 回复 | 直到 12 年前

Kumu 15 年前

我以前必须这样做,这是为了让它在多个浏览器中工作:

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>

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

Kzqai 15 年前

喝一杯怎么样 "accept" 按钮位于底部,在顶部有一个高可见性的注释,说明他们需要滚动到底部以接受协议并继续前进。

在这种情况下,如果您希望用户在继续之前接受,我将不依赖于javascript,我将创建不使用javascript的您想要的功能,并仅添加javascript进行增强(例如,可能是“您确定要离开此页吗”消息when他们不按“接受”按钮就关闭页面)。

解决问题的其他方法:

给出一份关于法律的简单的文本摘要。
设计好EULA(我猜)并且很漂亮,这样眼睛就容易阅读并且突出显示重要信息。
保持简短,以便在合理的时间范围内实际可读。
添加JS增强功能,使阅读变得有趣,例如可点击的改变颜色的元素。
尊重你的用户,让他们-想要-阅读你的协议,而不是无意义地强迫他们这样做。

Community Mohan Dere 8 年前

jquery有许多插件,当元素滚动到视图中时触发这些插件。

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

Community Mohan Dere 8 年前

我发现这个对我来说效果更好

$.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

animuson 15 年前

如果您使用javascript或其他东西来检测它们何时到达底部,那么您仍然会有人将滚动条移动到底部以跳过读取。这是一个失败的原因,别担心。如果他们注册了,不管他们读不读,他们都必须遵守你的协议。

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

Rainer Plumer 12 年前

下面是一个方法,如何确保用户已经阅读了协议,但我希望没有人会使用这样的方法:为了我们所有人的利益。

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