Скрипт некорректно работает в браузере Internet Explorer. Как исправить?

#javascript #jquery #internet_explorer #браузер #прокрутка

Скрипт некорректно работает в браузере Internet Explorer. Во время прокрутки происходит
сильное дерганье блока то вверх то вниз. Как исправить?



$(function() {
    var $hor = $("#horizontal");
    $("body").css('padding-bottom', $(window).width()*2);
    var delta = 0;
    $(window).on('scroll', function () {
        var top = $(document).scrollTop();
        var width = $(window).width();
        var lim = $hor.position().top - (delta) - ($(window).height() - $hor.outerHeight())
/ 2;
        delta = Math.min(Math.max(top - lim, 0), width * 2);

        $(".horizontal:first", $hor).css({left : delta});
        $(".horizontal:last", $hor).css({left : -(width*2 - delta)});
        $("body").css({'padding-top': delta, 'padding-bottom': width*2 - delta});
    });
});
p {
    height: 500px;
}
#horizontal {
    position: relative;
    overflow: hidden;
    width: 100%;
    font-size: 3em;
    margin: 0;
    padding: 0;
    height: 250px;
}
#horizontal .horizontal {
    position: absolute;
    width: 100%;
    left: -100%;
    padding: 20px;
}
#horizontal .horizontal .h_blockquote {
    position: relative;
    width: 100%;
    margin: 0 auto;
    font-size: 24px;
    line-height: 1.3em;
    color: #000;
}

test

    

        

            
Скрипт некорректно работает в браузере
Internet Explorer. Как исправить? Скрипт некорректно работает в браузере Internet Explorer.
Как исправить?
        
    
    

        

            
Скрипт некорректно работает в браузере
Internet Explorer. Как исправить? Скрипт некорректно работает в браузере Internet Explorer.
Как исправить?
        
    

test



    

Ответы

Ответ 1

Исправить нельзя, потому что вначале происходит движение по event scroll и только
потом срабатывает функция на scroll. (Вначале страница поднемается, а потом добавляется
padding к bady).
Как вариант, отлавливать прокрутку ролика мышки:
(в коде надо только правельно выставить границы)



var boo = true;
var delta = 10;
$("body").css('height', "6000px");
var $hor = $("#horizontal");
$(document).ready(function() {
  $('body').bind('mousewheel', function(e) {
    var width = $(window).width();
    if (e.originalEvent.wheelDelta / 120 > 0) {
      boo = false;
      $("body").css("overflow", "inherit");
      if ($(document).scrollTop() < 250 && !boo && (delta > 0 - $(".h_blockquote_wrap").width())) {
        $("body").css("overflow", "hidden");
        delta -= 10;
        $(".horizontal").css({
          left: delta + "px"
        });
        if (delta < 0 - $(".h_blockquote_wrap").width()) {
          $("body").css("overflow", "inherit");
          boo = true;
        }
      }
    } else {
      boo = true;
      $("body").css("overflow", "inherit");
      if ($(document).scrollTop() > 250 && boo && (delta < $("#horizontal").width())) {
        $("body").css("overflow", "hidden");
        delta += 10;
        $(".horizontal").css({
          left: delta + "px"
        });
        if (delta > $("#horizontal").width()) {
          $("body").css("overflow", "inherit");
          boo = false;
        }
      }
    }
  });
});
p {
  height: 500px;
}
#horizontal {
  position: relative;
  overflow: hidden;
  width: 100%;
  font-size: 3em;
  margin: 0;
  padding: 0;
  height: 250px;
  outline: 2px solid red;
}
.horizontal {
  display: block;
  position: absolute;
  width: 100%;
  left: -100%;
  padding: 20px;
  float: left;
}
.h_blockquote {
  position: relative;
  width: 100%;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.3em;
  color: #000;
}

test

  

    
Скрипт некорректно работает в браузере Internet
Explorer. Как исправить?
  


test