Недавно была у нас страничка, там появлалась очень широкая таблица, которая разрывала страницу, т.е. заставляла появиться горизонтальный скролл на body. Мы решили эту проблему добавлением стиля на таблицу, а именно { display: block; overflow-y: auto; max-width: 10px /* любая маленькая величина */ }
.
Но как известно, таблицы не предназначены для того, чтобы на них вешался display: block
, поэтому несмотря на многочисленные попытки сделать что-то универсальное, у других, более узких таблиц, возникли проблемы.
Мы решили, что надо определять, рвёт ли таблица страницу, или не рвёт.
Тут же нашли решение – вот такой компактный jquery-плагин здесь:
$.fn.hasOverflow = function() { var $this = $(this); var $children = $this.find('*'); var len = $children.length; if (len) { var maxWidth = 0; var maxHeight = 0 $children.map(function() { maxWidth = Math.max(maxWidth, $(this).outerWidth(true)); maxHeight = Math.max(maxHeight, $(this).outerHeight(true)); }); return maxWidth > $this.width() || maxHeight > $this.height(); } return false; };
Мы подправили его так, чтобы рассматривалась только ширина и использовали его следующим образом: $('body').hasOverflow()
.
Однако в некоторых случаях он не срабатывал (может быть ещё что-то другое изменилось на странице) и кроме этого не очень приятно, что выборка элементов может быть чересчур громоздкой – это может даже влиять на тормознутость страницы. Но на следующий день мы начали думать над этим заново и очень скоро пришли к очень простому методу проверки:
$(window).width() < $('body')[0].scrollWidth
Пока исправно работает! Утро вечера мудренее