Добрый день!
Есть сайт с горизонтальным скроллом. Навигация по сайту происходит с помощью jquery mousewheel (крутим колесико вниз - сайт скроллится горизонтально).
Чтобы все работало корректно, главному DIV контейнеру необходимо задать фиксированную ширину, которая состоит из суммы всех дочерних DIV (они могут быть как фиксированные, так и равные ширине экрана посетителя).
Делается все это с помощью скрипта:
// Считаем ширину экрана
var smWidth = (function () {
$('.full').css('width', $(window).width()); // Задаем элементам с данным классом ширину равную экрану
});
// Горизонтальная прокрутка скроллом
function windowSize(){
var ScWidth = $(document).width(); // Узнаем ширину окна
if (ScWidth > '991'){
// Если ширна больше значения, выполняем горизонтальную прокрутку
$('html, body, *').mousewheel(function(e, delta) {
// Интенсивность скролла 80
var isMac = /mac/i.test(navigator.platform);
if (isMac) {
this.scrollLeft -= (delta * 2);
} else {
this.scrollLeft -= (delta * 80);
}
e.preventDefault();
});
$(function() {
// Назначаем ширин блоку равную сумме блоков с классом calcme
overallwidth = 0;
$('.calcme').each(function() {
overallwidth = overallwidth + $(this).width() + parseInt($(this).css('padding-left')) + parseInt($(this).css('padding-right')) + parseInt($(this).css('margin-left')) + parseInt($(this).css('margin-right'));
});
$('.content').css('width', overallwidth);
});
}
// Если ширина меньше, то ничего не делаем
};
// Выполняем при загрузке
$(document).ready(function() {
smWidth();
windowSize();
});
// Выполняем при измении экрана
$(window).resize(function() {
smWidth();
windowSize();
});
Фишка в том, что при разрешении экрана 991px горизонтальный скролл отменяется. Таким образом, при загрузке и при ресайзе окна скрипт высчитывает ширину для главного контейнера.
Беда в том, что если открыть сайт в IE11, то главному контейнеру не задается фиксированная ширина, а если изменить размер окна и опять раскрыть, то скрипт срабатывает.
В чем может быть беда?