时间戳

首页 > 解决方案 > 使用 Isotope2 和 Scroll-js 滚动到单击的元素

javascript - 使用 Isotope2 和 Scroll-js 滚动到单击的元素

问题描述

我在一个项目中使用Isotope2和Scroll-JS 。砌体布局中有许多网格项目。当用户单击网格项目时，它会扩展为全宽，我希望该项目滚动到视口的顶部。我的问题是，不是从页面内的当前位置滚动，而是从页面顶部开始滚动。我在 Codepen 中做了一个简化的案例研究。我宁愿坚持使用 Vanilla Javascript 而不是使用 jQuery。

到目前为止，这是我的 Javascript…… 

window._ = (...myvar) => console.log(...myvar);
const Services = {
  /**
   * default values for Isotope
   * @type {Object}
   */
  gridDefaults: {
    itemSelector: '.grid-item',
    percentPositions: true,
    masonry: {
      gutter: '.gutter-sizer',
      columnWidth: '.grid-sizer'
    }
  },

  clickedItem: null,

  /**
   * Initializes the module
   * @return {undefined} Executive method used to plug the module in.
   */
  init: () => {
    _('Services module initialized');
    Services.scroll = new Scroll(document.body);
    const grid = document.querySelector('.grid');
    const gridItems = grid.querySelectorAll('.grid-item');
    gridItems.forEach( gridItem => {
      gridItem.addEventListener('click', Services.Listeners.toggleExpand);
    });

  // call the Isotope function to process the grid element
    const iso = Services.iso = new Isotope( grid, Services.gridDefaults );
    iso.on('layoutComplete', Services.Listeners.scroll);
  },
  Listeners: {
    toggleExpand: function(e){
      const clickedGridItem = Services.clickedGridItem = Services.Helpers.clickedGridItem(e);
      clickedGridItem.classList.toggle('grid-item--width2');
      Services.iso.layout();
    },
    scroll: function(e) {
      _(Services.clickedGridItem);
      const scroll = Services.scroll;
      scroll.toElement(Services.clickedGridItem, {duration: 1000});
    }
  },
  Helpers: {
    clickedGridItem: function( eve ) {
      _(eve.path);
      return clickedItem = eve.path.find( (el) => 
        el.classList.contains('grid-item') );
    }
  }
};

Services.init();

这是 Scroll-JS 文档推荐的滚动到元素的内容（并且在测试中可以正常工作） 

var myElement = document.body.getElementsByClassName('my-element')[0];
var scroll = new Scroll(document.body);
scroll
  .toElement(myElement)
  .then(function () {
    // done scrolling to the element
  });

标签： javascriptscrolljquery-isotope

解决方案

这是scroll-js开发人员的答案。

@crs1138 您的示例似乎有问题。所有网格项都是绝对定位的，并且父元素（在您的示例中）没有溢出内容。根据自述文件，您的父元素需要始终具有溢出内容。

除此之外，我怀疑其他 JS 文件中的元素正在执行某些操作，导致您的页面重绘回 0 高度。

推荐阅读