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

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 开发工具快速查看您的网站的结果。尝试使用更合适的分辨率