Скрипт некорректно работает в браузере 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
test
Ответ
Исправить нельзя, потому что вначале происходит движение по 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
test
Комментариев нет:
Отправить комментарий