Question

我正在创建一个条款和条件页面，在移动设备上使用它会产生溢出。我正在尝试创建一个函数，该函数将检测用户何时滚动到底部并有效启用我的提交按钮。问题是我不知道如何用Javascript来检测这种类型的用户输入，如果有人可以对此有所了解，我会很感激。

.mainContainer {
  width: 50%;
  margin-left: 25%;
  margin-right: 25%;
}

.txtContainer {
  height: 250px;
  overflow-y: auto;
}

.btnContainer {
  margin-top: 20px;
}

.btn {
  width: 100%;
  height: 60px;
  font-size: 20px;
}

<div class="mainContainer">
  <div class="txtContainer">
    <p>Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions
      Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms
      and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions
      Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms
      and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions
      Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms
      and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions
      Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms
      and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions
      Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... Terms
      and Conditions Write Up... Terms and Conditions Write Up... Terms and Conditions Write Up... </p>
  </div>
  <div class="btnContainer">
    <button class="btn" disabled>Submit</button>
  </div>
</div>

预先感谢，短跑。

Answer 1

这将检测对象的滚动并默认情况下禁用按钮，然后在到达底部时将启用按钮。如果用户向后滚动，则该按钮将被禁用，但如果不是您想要的按钮，则很容易覆盖。

library(dplyr)
# library(purrr) # map2_dbl
Reference <- bind_rows(Reference_A, Reference_B, Reference_C) %>%
  nest_by(type, .key = "ref") %>%
  ungroup()
Reference
# # A tibble: 3 x 2
#   type                 ref
#   <chr> <list<tbl_df[,1]>>
# 1 A                [3 x 1]
# 2 B                [2 x 1]
# 3 C                [3 x 1]

Dataframe %>%
  nest_by(group, type, .key = "data") %>%
  left_join(Reference, by = "type") %>%
  mutate(
    score = purrr::map2_dbl(data, ref, ~ {
      if (length(.x) == 0 || length(.y) == 0) return(numeric(0))
      if (length(.x) != length(.y)) return(0)
      sum((is.na(.x) & is.na(.y)) | .x == .y) / length(.x)
    })
  ) %>%
  select(-data, -ref) %>%
  ungroup()
# # A tibble: 3 x 3
#   group type  score
#   <int> <chr> <dbl>
# 1     1 A     1    
# 2     2 B     0    
# 3     2 C     0.667

var txt = document.querySelector(".txtContainer");
var btn = document.querySelector(".btn");

txt.addEventListener("scroll",function(e){
   btn.disabled = true;
   if(e.target.offsetHeight + e.target.scrollTop == e.target.scrollHeight){
      btn.disabled = false;
   }
});

.mainContainer {
  width: 50%;
  margin-left: 25%;
  margin-right: 25%;
}

.txtContainer {
  height: 250px;
  overflow-y: auto;
}

.btnContainer {
  margin-top: 20px;
}

.btn {
  width: 100%;
  height: 60px;
  font-size: 20px;
}

如何检测溢出是否已滚动到底部？

1 个答案: