How to detect an element is in the end of the page?

Question

I'm creating my custom tag helper and I don't know what is this technique called?

My contenteditable is always in the bottom of the page, whenever I press @ character, it will show a custom dropdown menu at the bottom. Then, to use the menu, I have to scroll the page.

Now, I want to detect if there is no more height in the bottom, it will be shown at the top of the contenteditable.

Can you give me some google search keywords to understand about it? Or maybe it's better if I have a small demo.

Thank you!

Maybe useful https://medium.com/talk-like/detecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2 — GhitaB, Mar 14 '18 at 10:01
https://stackoverflow.com/questions/20791374/jquery-check-if-element-is-visible-in-viewport — GhitaB, Mar 14 '18 at 10:03
https://jsfiddle.net/c3j451Lt/6/ but you are right... you can't use this because I understand your dropdown is always out of the viewport. I suggest you can position it always in the viewport so the scroll to be not needed. You can keep the @ and input where it is now, but the list with suggestion to be above it. — GhitaB, Mar 14 '18 at 10:15

score 1 · Accepted Answer · edited Mar 14 '18 at 10:46

I created a DEMO below:

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

You can calculate the distance from the end of your container to the element by calculating: container's height - the top position of your element.

$(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);
});

Example of html:

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

Some css for nice styles:

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

#first {
  background: #556622;
}

#second {
  background: #773399;
}

#last {
  background: #996677;
}

So, when this distance is less than 100px (let's say) you will change from your A to B case.

How to detect an element is in the end of the page?

1 Answers1