水平滚动窗口上的居中网格

Question

我在固定宽度的元素中有一个轮播网格，我希望中间的项居中。我要在加载时添加左滚动位置，但这不能解释浏览器窗口的宽度。如何计算窗口宽度并使中间项目始终居中？

$('.grid-wrapper').ready(function() {
  $('.grid-wrapper').animate({
     scrollLeft: $('.checked').offset().left - 750
    }, 1000, function() {
  });
});

这是我的小提琴： https://jsfiddle.net/khecker/Ld0wu2s9/8/

Answer 1

假设您的<main>标签始终为100％：

$('.grid-wrapper').ready(function() {
     var pos = $('.checked').offset().left - (($('.grid-wrapper').width()) / 2) + ($('.checked').width() / 2);
    $('.grid-wrapper').animate({
        scrollLeft: pos
    }, 1000, function() {
    })
});

如果要使用窗口对象计算大小，则可以改用window.innerWidth。