使用选项卡式内容滚动页面

Question

我的网站上有一些标签式图库，它是使用jQuery制作的。 当我尝试滚动页面时，在带有活动图像选项卡的图库部分中，滚动非常滞后 你可以试着帮我解决这个问题吗？ 这是负责标签库的代码的一部分：
HTML（Jade）：

article.content-box.gallery#osom
  ul#homepagetabs.gallerytabs(data-tabs="tabset1")
    li.tabs#tab7(data-tab="t1")(style="background-image: url('http://static1.gamespot.com/uploads/original/1551/15511094/3066900-legends-1940x1095.png')")
  #tabset1.gallery             
    #t1.tab.is-acive.current(style="background-image: url('http://fastup.pl/data/Aueternum/Rzeczy%20cyca/maxresdefault.jpg')")

CSS（手写笔）：

.tab
  display none
  animation: animacja
  animation-duration: .3s
  animation-iteration-count: 1
  animation-timing-function: ease-in-out
  animation-fill-mode: both
  &.is-active
    display block
    width: 100%
    height: 85vh
    background-position: center
    background-size: cover
    border: 5px solid $pink
.gallerytabs
  display: flex
  margin: 0
  padding: 0
  align-items: center
  width: 100%
.tabs
  flex: 1
  height: 70px
  margin: 25px 5px
  background-position: center
  background-size: cover
  border: 1px solid $pure-pink
  filter: grayscale(100%)
  transition: 0.3s ease-in-out
  position relative
  z-index 1
  &:hover
    filter: none
    cursor: pointer
  &.is-active
    filter: none
.gallery
  width: 100%
  height: 100vh

JS（jQuery）

$('[data-tab]').on('click', function() {
  var $btn = $(this).attr('data-tab');
  var $wrapper = $(this).parent().attr('data-tabs');
  var activeClass = 'is-active';
  $('[data-tabs='+$wrapper+']'+' [data-tab]').removeClass(activeClass);
  $('[id='+$wrapper+']'+' .tab').removeClass(activeClass);
  $(this).addClass(activeClass);
  $('[id='+$btn+']').addClass(activeClass);
});

Here you have the page to see the laggy effect.

Answer 1

最有可能的原因是因为您拥有非常庞大的图片 - 请参阅下面的屏幕截图，其中显示了使用Chrome开发工具快速查看您网站的结果。尝试使用更合适的解决方案