如何检测元素是在页面的末尾？

Question

我正在创建自定义标记帮助器，我不知道这种技术叫做什么？

我的contenteditable始终位于页面底部，每当我按@个字符时，它都会在底部显示自定义下拉菜单。然后，要使用菜单，我必须滚动页面。

现在，我想检测底部是否有更高的高度，它会显示在contenteditable的顶部。

你能给我一些谷歌搜索关键词来了解它吗？或者，如果我有一个小型演示，那可能会更好。

谢谢！

Answer 1

我在下面创建了一个DEMO：

$(document).ready(function() {
  var container_height = $("#container").height();
	var first_position = container_height - $("#first").position().top;
  var second_position = container_height - $("#second").position().top;
  var last_position = container_height - $("#last").position().top;
  
  console.log(`First position: ${first_position}`)
  console.log(`Second position: ${second_position}`)
  console.log(`Last position: ${last_position}`)
})

#first, #second, #last {
  width: 100px;
  height: 100px;
  padding: 30px;
  margin: 3px;
  text-align: center;
}

#first {
  background: #556622;
}

#second {
  background: #773399;
}

#last {
  background: #996677;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="first">FIRST</div>
  <div id="second">SECOND</div>
  <div id="last">LAST</div>
</div>

您可以通过计算：容器的高度 - 元素的顶部位置来计算从容器末端到元素的距离。

$(document).ready(function() {
  var container_height = $("#container").height();
  var first_position = container_height - $("#first").position().top;
  var second_position = container_height - $("#second").position().top;
  var last_position = container_height - $("#last").position().top;
  console.log(first_position, second_position, last_position);
});

html示例：

<div id="container">
  <div id="first">FIRST</div>
  <div id="second">SECOND</div>
  <div id="last">LAST</div>
</div>

一些好的风格的CSS：

#first, #second, #last {
  width: 100px;
  height: 100px;
  padding: 30px;
  margin: 3px;
  text-align: center;
}

#first {
  background: #556622;
}

#second {
  background: #773399;
}

#last {
  background: #996677;
}

所以，当这个距离小于100px时（比方说），你将从A改为B。