Как определить, находится ли текст скрытого/переполнения сверху или снизу элемента

Я хотел бы расширить ответ на Shog9 в

Как определить из javascript, если элемент html имеет переполненный контент

И я хотел бы знать, находится ли скрытый текст сверху или снизу (или обоих или ни одного) содержащего элемента.

Какой лучший способ сделать это?

Ответ 1

Я не мог видеть лес через деревья. Фрагмент кода Joel var isScrolledDown = el.scrollTop > 0; заставил меня понять, как это сделать. Я использовал две функции:

function HasTopOverflow(el) {
   return el.scrollTop;
}

function HasBottomOverflow(el) {
   var scrollTop = el.scrollTop,
       clientHeight = el.clientHeight,
       scrollHeight = Math.max(el.scrollHeight, clientHeight);

   return (scrollTop + clientHeight) < scrollHeight;
}

Не тестировали, если он будет работать на IE6 +, но FF работает.

Если есть какие-либо ошибки, сообщите мне.

Ответ 2

Вы можете комбинировать scrollLeft и scrollTop с ответом Shog.

В частности:

// Author: Shog9
// Determines if the passed element is overflowing its bounds,
// either vertically or horizontally.
// Will temporarily modify the "overflow" style to detect this
// if necessary.
// Modified to check if the user has scrolled right or down.
function checkOverflow(el)
{
   var curOverflow = el.style.overflow;
   if ( !curOverflow || curOverflow === "visible" )
      el.style.overflow = "hidden";

   var isOverflowing = el.clientWidth < el.scrollWidth 
      || el.clientHeight < el.scrollHeight;

   // check scroll location
   var isScrolledRight = el.scrollLeft > 0;
   var isScrolledDown = el.scrollTop > 0;

   el.style.overflow = curOverflow;

   return isOverflowing;
}