Question

我有一个包含免责声明的div，我想确保有人滚动到免责声明的底部，然后您可以选中复选框，确认您已阅读免责声明。法律部这是一个示例标记：

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:app="http://schemas.android.com/tools"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    card_view:cardCornerRadius="25dp"
    android:layout_height="wrap_content"
    android:layout_margin="8dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <EditText
                android:id="@+id/etOrigin"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Enter origin address" />
            <EditText
                android:id="@+id/etDestination"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:hint="Enter destination address" />
        </LinearLayout>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/btnFindPath"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:onClick="fabClick"
            android:src="@drawable/ic_add"
            app:fabSize="normal"
            android:layout_gravity="center_vertical"
            app:layout_anchor="@id/fab_coordinator_layout" />

    </LinearLayout>
</android.support.v7.widget.CardView>

我可以检测到有人像这样滚动到#acknowledge的底部：

<div id="step2Disclaimer" style="height:50px;overflow-y:scroll">
    <p class="l-twelve l-mb1 t-base t-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate temporibus commodi sapiente culpa sunt iure veniam harum impedit architecto dolorem quam facilis, odio blanditiis beatae similique non voluptatibus at dolorum?</p>
    <p class="l-twelve l-mb1 t-base t-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate temporibus commodi sapiente culpa sunt iure veniam harum impedit architecto dolorem quam facilis, odio blanditiis beatae similique non voluptatibus at dolorum?</p>                             
</div>

<input type="checkbox" id="acknowledge" name="acknowledge" value="true">
<label class="styled" for="acknowledge">I acknowledge</label>

我需要做的事情，不知怎样的遗失，是在改变＆＃34;承认＆＃34;检查是否有人滚动了。条件不起作用 - ＆gt;澄清，如果有人检查复选框＆＃34;确认＆＃34;并且没有滚动到＆＃34; step2Disclaimer＆＃34;的底部。我需要运行一个函数。

$('#step2Disclaimer').on('scroll', function() {
    if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
    alert('end reached');
    }
});

Answer 1

首先，您使用this作为目标，而不是定位div。其次，您需要检查scrollTop加innerHeight是否比scrollHeight更小，而不是更大。$(function() { $('input[name="acknowledge"]').change(function(){ if ($(this).is(':checked') && ($('#step2Disclaimer').scrollTop() + $('#step2Disclaimer').innerHeight() < $('#step2Disclaimer')[0].scrollHeight)) { alert('checked but not scrolled'); } }); });。以下应该有效：

import pandas as pd
import dask.dataframe as dd
import random
s = "abcd"
lst = 10*[0]+list(range(1,6))
n = int(1e2)

df = pd.DataFrame({"col1": [random.choice(s) for i in range(n)],
                   "col2": [random.choice(lst) for i in range(n)]})
df["idx"] = df.col1
df = df[["idx","col1","col2"]]

def fun(data):
    if data["col2"].mean()>1:
        return 2
    else:
        return 1

df.set_index("idx", inplace=True)
ddf1 = dd.from_pandas(df, npartitions=4)
gpb = ddf1.groupby("col1").apply(fun, meta=pd.Series(name='col3'))
ddf2 = ddf1.join(gpb.to_frame(), on="col1")

Working Fiddle

Answer 2

我无法利用jQuery.appear和seem.js，因为这些库隐式处理DOM视口而不是元素视口。因此，这里的代码将禁止复选框，直到用户手动滚动协议的内容（最底层）。

<强> HTML

<div id="step2Disclaimer">
    <p class="l-twelve l-mb1 t-base t-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate temporibus commodi sapiente culpa sunt iure veniam harum impedit architecto dolorem quam facilis, odio blanditiis beatae similique non voluptatibus at dolorum?</p>
    <p class="l-twelve l-mb1 t-base t-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate temporibus commodi sapiente culpa sunt iure veniam harum impedit architecto dolorem quam facilis, odio blanditiis beatae similique non voluptatibus at dolorum?</p>
    <div class='agreement_read'>?</div>
</div>

<input class='unread' type="checkbox" id="acknowledge" name="acknowledge" value="true" disabled>
<label class="styled unread" for="acknowledge">I acknowledge</label>

<强> CSS

#step2Disclaimer {
    width: 315px;
    border: solid 1px #ACE;
    margin-bottom: 15px;
    height: 115px;
    overflow-y: scroll;
    font-family: arial;
    font-size: 1rem;
    padding: 3px;
}

.unread {
    cursor: not-allowed;
    border: dashed 1px red;
    padding: 3px;
    color: #CCC;
}

.fully_read {
    border: solid 1px green;
    padding: 3px;
}

<强>的JavaScript

var master_agreement = document.getElementById('step2Disclaimer');

jQuery(master_agreement).scroll(function(e) {
    if (isScrolledToBottom(master_agreement) && jQuery('.unread').length) {
        jQuery('.unread').removeClass('unread').addClass('fully_read');
        jQuery('#acknowledge').prop('disabled', false);
    }
});

//Chris Martin of StackOverflow - https://stackoverflow.com/a/32283147/5076162
function isScrolledToBottom(el) {
    var $el = $(el);
    return el.scrollHeight - $el.scrollTop() - $el.outerHeight() < 1;
}

＆＃13;

var master_agreement = document.getElementById('step2Disclaimer');

jQuery(master_agreement).scroll(function(e) {
    if (isScrolledToBottom(master_agreement) && jQuery('.unread').length) {
        jQuery('.unread').removeClass('unread').addClass('fully_read');
        jQuery('#acknowledge').prop('disabled', false);
    }
});

//Chris Martin of StackOverflow - https://stackoverflow.com/a/32283147/5076162
function isScrolledToBottom(el) {
    var $el = $(el);
    return el.scrollHeight - $el.scrollTop() - $el.outerHeight() < 1;
}

＆＃13;

#step2Disclaimer {
    width: 315px;
    border: solid 1px #ACE;
    margin-bottom: 15px;
    height: 115px;
    overflow-y: scroll;
    font-family: arial;
    font-size: 1rem;
    padding: 3px;
}

.unread {
    cursor: not-allowed;
    border: dashed 1px red;
    padding: 3px;
    color: #CCC;
}

.fully_read {
    border: solid 1px green;
    padding: 3px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="step2Disclaimer">
    <p class="l-twelve l-mb1 t-base t-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate temporibus commodi sapiente culpa sunt iure veniam harum impedit architecto dolorem quam facilis, odio blanditiis beatae similique non voluptatibus at dolorum?</p>
    <p class="l-twelve l-mb1 t-base t-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate temporibus commodi sapiente culpa sunt iure veniam harum impedit architecto dolorem quam facilis, odio blanditiis beatae similique non voluptatibus at dolorum?</p>
</div>

<input class='unread' type="checkbox" id="acknowledge" name="acknowledge" value="true" disabled>
<label class="styled unread" for="acknowledge">I acknowledge</label>

＆＃13;

Answer 3

我会隐藏该复选框，直到用户到达页面末尾。您可以使用Jquery的悬停或鼠标悬停以使用户到达底部时显示该框。

滚动div必须滚动到底部才能选中复选框

3 个答案: