js控制当滚动条到最底部时隐藏某个div
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js控制当滚动条到最底部时隐藏某个div相关的知识，希望对你有一定的参考价值。
参考技术A 您好！具体代码如下，兼容各浏览器，其中scrollTop 为当前页面到顶部的距离，document.body.offsetHeight为整个页面的高度，document.documentElement.clientHeight为当前屏幕的高度，有不明白的可以问我，希望我的回答能帮到您！<br><!DOCTYPE html><br><html><br><head><br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br><title> </title><br><style><br>bodymargin:0;height:2000px;<br>divheight:500px;width:500px;background:#f00;margin:0 auto;<br></style><br><script><br>window.onscroll=function()<br>var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;<br>
if(scrollTop>=document.body.offsetHeight-document.documentElement.clientHeight)<br>
<br>
document.
getElementById
("div1").style.display="none";
<br>
alert("去看看是不是DIV不见了");<br>
<br><br></script><br></head><br><body><br><div id="div1"><br>
this is a div<br></div><br></body><br></html>
如何检测 UITableView 何时滚动到最底部/顶部？
【中文标题】如何检测 UITableView 何时滚动到最底部/顶部？【英文标题】：How can I detect when a UITableView has been scroll past the very bottom/top? 【发布时间】：2015-06-13 01:52:08 【问题描述】：我有一个包含 3 个 tableView 的视图。一个是“主表视图”，然后我有一个“答案表视图”和“百分比表视图”。
当屏幕加载时，主表视图占据屏幕顶部的 95%。屏幕底部是一个包含 2 个按钮的 UIView。 “答案”和“百分比”。
它的工作方式是，如果我单击“百分比”，它会将主表视图的高度更改为 0，并将该高度提供给答案表视图。这会将“Answers/Percentage”视图动画到顶部，并在其下方显示 Answers 或 Percentage TableView。
这是一个例子：
如您所见，我点击了“百分比”，它会对其进行动画处理。如果您再次单击“百分比”，它会重新设置动画。
但是，我想要做的是，如果“答案/百分比”视图位于视图的底部，并且用户向上滚动 Main Feed 到达 tableView 内容的最末端（不仅仅是末端，而是最后，还有一点点），我想像 .gif 那样对其进行动画处理。
类似地，如果“答案/百分比”位于顶部，并且用户向下滚动下方的“答案表视图”到上面没有更多数据的某个点，它将完全动画化。
另外，我不希望“答案/百分比”视图位于中间，并同时显示顶部和底部的表格视图。所有一个，或另一个，但不是两者兼而有之。我现在有。
我需要知道的是......我如何检测用户是否已经滚动超过表格视图的最顶部或最底部 +30 像素，例如，以启动我的动画？
【问题讨论】：
【参考方案1】：您可以使用表格视图的 contentOffset 属性。
if(tableView.contentOffset.y >= (tableView.contentSize.height - tableView.frame.size.height))
// Start the animation
我没有对此进行测试，但如果它有效，请告诉我。
【讨论】：
我也会采用.contentOffset.y 方法。要包括问题中提到的 30 像素“缓冲区”，它必须说类似tableView.contentOffset.y - 30.0f >= (tableview[...]。并且：要真正有一个地方以这种方式检查 contentOffset，表格视图委托可以实现scrollViewDidScroll:（如果你想在超过 30px 阈值后立即动画）或scrollViewDidEndDragging:willDecelerate:（如果你想等待用户释放拖动）。
@sublimerequisite 这似乎可行，问题是，在我制作动画后，我需要能够从顶部的 tableview 中删除用户触摸。那可能吗？例如，发生的情况是它们滚动到底部，并且足够远，它会在底部的 tableView 上设置动画。手指仍然在屏幕上，他们可以将原始的 tableview 滚动回顶部。暂时不见。然后，当他们重新设置顶部 tableview 的动画时，它已滚动到顶部而不是我想要的底部。制作动画时如何踢/结束他们的触摸事件？
@Gamma 这似乎工作，问题是，在我做动画之后，我需要能够从顶部的 tableview 中删除用户触摸。那可能吗？例如，发生的情况是它们滚动到底部，并且足够远，它会在底部的 tableView 上设置动画。手指仍然在屏幕上，他们可以将原始的 tableview 滚动回顶部。暂时不见。然后，当他们重新设置顶部 tableview 的动画时，它已滚动到顶部而不是我想要的底部。制作动画时如何踢/结束他们的触摸事件？【参考方案2】：
根据 sublimerequisite 的方法做出另一个答案，因为这样更容易格式化和发布代码。基本思想是检查表格视图的.contentOffset.y，例如通过在其委托中实现scrollViewDidScroll，并相应地触发您的动画。
它可能有点 QnD 的感觉，但如果您还需要在触发动画时中止用户的拖动操作，一个简单的方法是“重置”表格视图的手势识别器。在可能看起来像这样的代码中：
static const CGFloat kChrisTableViewAnimationThreshold = 30.0f;
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
if (scrollView == self.topTableView)
if([self scrolledPastBottomThresholdInTableView:self.topTableView])
// Start the animation
// ...
// Toggling the table view's pangGestureRecognizer off and on cancels the gesture
self.topTableView.panGestureRecognizer.enabled = NO;
self.topTableView.panGestureRecognizer.enabled = YES;
- (BOOL)scrolledPastBottomThresholdInTableView:(UITableView *)tableView
return (tableView.contentOffset.y - kChrisTableViewAnimationThreshold >= (tableView.contentSize.height - tableView.frame.size.height));
请注意，这个插图显然只涵盖了识别顶部表格视图何时滚动超过其底端，但将其调整为处理其他场景应该非常简单。
【讨论】：
以上是关于js控制当滚动条到最底部时隐藏某个div的主要内容，如果未能解决你的问题，请参考以下文章