Выделите выделенный элемент с помощью Isotope2 и Scroll-js. - PullRequest
Новая
       6

Выделите выделенный элемент с помощью Isotope2 и Scroll-js.

0 голосов
/ 16 мая 2018

Я использую 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
  });

1 Ответ

0 голосов
/ 17 мая 2018

Вот ответ от scroll-js разработчика.

@ crs1138, похоже, проблема в вашем примере. все элементы сетки абсолютно позиционированы, и родительский элемент (в вашем примере) не имеет содержимого переполнения. Согласно README, ваш родительский элемент должен всегда иметь содержимое переполнения .

В дополнение к этому, я подозреваю, что с элементами в других JS-файлах что-то делается, что заставляет вашу страницу перерисовываться до 0 в высоту.

...