Colorbox остановить фоновый прокрутку и вернуться в то же место на родительской странице

У меня есть неупорядоченный список, который я создал в drupal 7, используя представления. В каждом элементе списка есть ссылка, которая открывает colorbox. Если вы поместите мышь на выцветший фон colorbox (который является родительской), вы можете прокрутить родительскую страницу. То, что мне нужно, - это родительская страница, чтобы остановить прокрутку и вернуться к той же позиции/привязке на родительской странице, когда она закрыта.

Поиск по вопросам здесь я нашел код:

$(document).bind('cbox_open', function () {
    $('html').css({ overflow: 'hidden' });
}).bind('cbox_closed', function () {
    $('html').css({ overflow: 'auto' });
});

Приведенный выше код работает, но переводит родительскую страницу назад в самый верх.

Это будет работать, если я могу сделать это динамически;

$("html,body").scrollTop(400); // 300 is just a example

Любые идеи?

Ответ 1

Я думаю, вы можете сделать что-то вроде этого:

var position;
$(document).bind('cbox_open', function() {
    position = $("html,body").scrollTop();
    $('html').css({
        overflow: 'hidden'
    });
}).bind('cbox_closed', function() {
    $('html').css({
        overflow: 'auto'
    });
    $("html,body").scrollTop(position);
});

Ответ 2

Канникс получил это. Я просто скрою переполнение на теле, переполнение html, вероятно, прекрасно.

$(document).bind('cbox_open', function() {
    $('body').css({ overflow: 'hidden' });
}).bind('cbox_closed', function() {
    $('body').css({ overflow: '' });
});

Однако он не должен прокручиваться назад. Установка scrolltop просто документирует другую проблему (например, не отменяет действие по умолчанию для элемента привязанного клика).

Ответ 3

Для iphone/ipad у меня есть это решение, которое отлично работает!

$(document).bind('cbox_open', function() {
    var position = $('body').scrollTop();
        $('body').attr("data-position", position);
        $('body').css({position : 'fixed', top: '-' + position + 'px'});
    }).bind('cbox_closed', function() {
        $('body').css({position : 'relative', top: '0'}); 
        var position = $('body').attr("data-position");
        $('body').scrollTop(position);
    });

Ответ 4

У меня есть две оптимизации:

Лучшим подходом было бы добавить удаление css-класса. Если вы это сделаете, вы можете быть уверены, что после того, как вы уйдете, все получило "reset".
Если вы используете cbox_cleanup в пользу cbox_closed, пользователь вряд ли заметит "перескакивание" содержимого.

Поэтому мое решение было бы:

$(document).bind('cbox_open', function() {
  $('html').addClass("noScrollSimple");
}).bind('cbox_cleanup', function() {
  $('html').removeClass("noScrollSimple");
});

.noScrollSimple {
  overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>