Проблема с LocalScroll при использовании прокручиваемых элементов - PullRequest
Новая
       42

Проблема с LocalScroll при использовании прокручиваемых элементов

2 голосов
/ 22 марта 2019

Я заметил, что если вы используете плагин LocalScroll с элементами с возможностью прокрутки и используете прокрутку в этих элементах, поведение иногда выглядит так, как будто есть ошибка.

URL с примером проблемы: http://jsfiddle.net/oms02/s53h7gko/26/

$.localScroll({
    target: '#wrapper',
    axis: 'xy',
		queue:true,
		duration:1000,
		hash:false,
		lazy:true,
    onBefore:function( e, anchor, $target ){
		},
		onAfter:function( anchor, settings ){
		}
});
#wrapper {
  border:3px solid black;
  width:400px;
  height:300px;
  margin: 10px auto 0;
  overflow:hidden;
}

#div1 {
  width:4000px;height:500px;
  overflow-y:auto;overflow-x:auto;
  border:1px solid red;
  margin:5px 0 0 5px;
}

#div2 {
  width:4000px;height:500px;
  overflow-y:auto;overflow-x:auto;
  border:1px solid red;
  margin:5px 0 0 5px;
}

.box {
  float:left;
  border:1px solid green;
  width:200px;height:600px;
}

.box h2 {
  margin:0 auto;
  text-align:center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js?1.4.11"></script>
<script src="http://demos.flesler.com/jquery/localScroll/js/jquery.localscroll-min.js?1.3.4"></script>
<a href="#section2.1">go to section 2.1</a>
<br>
<a href="#section2.2">go to section 2.2</a>

<div id="wrapper">
  <div id="div1">
    <div class="box" id="section1.1">
      <h2>content 1.1</h2>
    </div>
    <div class="box" id="section1.2">
      <h2>content 1.2</h2>
    </div>
    <div class="box" id="section1.3">
      <h2>content 1.3</h2>
    </div>
    <div class="box" id="section1.4">
      <h2>content 1.4</h2>
    </div>
    <div class="box" id="section1.5">
      <h2>content 1.5</h2>
    </div>
    <div class="box" id="section1.6">
      <h2>content 1.6</h2>
    </div>
  </div>
  <div id="div2">
    <div class="box" id="section2.1">
      <h2>content 2.1</h2>
    </div>
    <div class="box" id="section2.2">
      <h2>content 2.2</h2>
    </div>
    <div class="box" id="section2.3">
      <h2>content 2.3</h2>
    </div>
    <div class="box" id="section2.4">
      <h2>content 2.4</h2>
    </div>
    <div class="box" id="section2.5">
      <h2>content 2.5</h2>
    </div>
    <div class="box" id="section2.6">
      <h2>content 2.6</h2>
    </div>
  </div>
</div>

Сценарий:

Существует оболочка (небольшого размера), которая имеет внутри два больших прокручиваемых элемента div (один раз за другим) с шестью всплывающими элементами, высота которых больше, чем у их родителей, чтобы пользователь мог использовать свиток.В резюме «карта» выглядит так:

|1.1 |1,2 |1,3 |1.4 |1,5 |1.6 |

|2.1 |2.2 |2.3 |2,4 |2,5 |2.6 |

Шаги:

  1. Нажмите на ссылку «перейти в раздел 2.1».Это правильно приводит вас к этому div.
  2. Прокрутите раздел и, прежде чем нажимать другую ссылку, убедитесь, что div # section2.1 не находится вверху (прокрутка).В этом случае вы не сможете увидеть текст поля.
  3. Нажмите на ссылку «перейти к разделу 2.2»: во втором движении (по оси Y) она прокручивается нався обертка, что неправильно, потому что прокрутка должна происходить на # div2.Текст коробки выглядит как скрытый.Если вы прокрутите поля в разделе 2, то увидите содержимое, но вы увидите, что плагин не привел вас в правильное положение.

Я перепробовал почти всено все не удалось: 1. Установить поле между обоими элементами.2. Вставьте третий делитель между ними (положение относительно и нижний z-индекс).3. Установите положение прокрученного элемента div на вершину до начала движения.

Результат всегда одинаков: оба элемента div выглядят так, как будто они оба столкнулись / раздавлены

Есть идеи?Заранее спасибо!

1 Ответ

1 голос
/ 05 апреля 2019

Текст коробки выглядит как скрытый. Если вы прокрутите поля в разделе 2, вы увидите содержимое, но вы увидите, что плагин не привел вас в правильное положение.

Проблема может быть решена с помощью обратных вызовов offset и onAfter:

  • onAfter: сохранить текущую верхнюю позицию для каждого якоря, только в первый раз
  • смещение: снова вычислить текущую вершину и, если она отличается (см. Событие прокрутки), вернуть смещение для его компенсации

Чтобы компенсировать прокрутку, вам также нужно добавить в обратный вызов смещения вызов анимации scrollTop. 

    $.localScroll({
            target: '#wrapper',
            axis: 'xy',
            queue: true,
            duration: 1000,
            hash: false,
            lazy: true,
            offset: function(elem, anchor) {
                var top = anchor.offset().top + $(this.target).scrollTop() - $(this.target).offset().top;
                var startPos = anchor.data('startPos');
                if (startPos != undefined && startPos != top) {
                    startPos = {top: startPos - top, left: 0};
                }
                // in order to compensate the scroll...next line
                anchor.parent().animate({ scrollTop: 0 }, 10)
                return startPos;
            },
            onBefore: function (e, anchor, $target) {
            },
            onAfter: function (anchor, settings) {
                var startPos = anchor.data('startPos');
                if (startPos == undefined) {
                    var self = this;
                    anchor.siblings().addBack().each(function(idx, ele) {
                        var top = anchor.offset().top + $(self).scrollTop() - $(self).offset().top;
                        $(ele).data('startPos', top);
                    });
                }
            }
     });


$.localScroll({
  target: '#wrapper',
  axis: 'xy',
  queue: true,
  duration: 1000,
  hash: false,
  lazy: true,
  offset: function(elem, anchor) {
      var top = anchor.offset().top + $(this.target).scrollTop() - $(this.target).offset().top;
      var startPos = anchor.data('startPos');
      if (startPos != undefined && startPos != top) {
          startPos = {top: startPos - top, left: 0};
      }
      anchor.parent().animate({ scrollTop: 0 }, 10)
      return startPos;
  },
  onBefore: function (e, anchor, $target) {
  },
  onAfter: function (anchor, settings) {
      var startPos = anchor.data('startPos');
      if (startPos == undefined) {
          var self = this;
          anchor.siblings().addBack().each(function(idx, ele) {
              var top = anchor.offset().top + $(self).scrollTop() - $(self).offset().top;
              $(ele).data('startPos', top);
          });
      }
  }
});
#wrapper {
    border: 3px solid black;
    width: 400px;
    height: 300px;
    margin: 10px auto 0;
    overflow: hidden;
}

#div1 {
    width: 4000px;
    height: 500px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid red;
    margin: 5px 0 0 5px;
}

#div2 {
    width: 4000px;
    height: 500px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid red;
    margin: 5px 0 0 5px;
}

.box {
    float: left;
    border: 1px solid green;
    width: 200px;
    height: 600px;
}

.box h2 {
    margin: 0 auto;
    text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.localscroll@2.0.0/jquery.localScroll.min.js"></script>

<a href="#section1.1">go to section 1.1</a>
<br>
<a href="#section1.2">go to section 1.2</a>
<br>
<a href="#section1.3">go to section 1.3</a>
<br>
<a href="#section2.1">go to section 2.1</a>
<br>
<a href="#section2.2">go to section 2.2</a>
<br>
<a href="#section2.3">go to section 2.3</a>

<div id="wrapper">
    <div id="div1">
        <div class="box" id="section1.1">
            <h2>content 1.1</h2>
        </div>
        <div class="box" id="section1.2">
            <h2>content 1.2</h2>
        </div>
        <div class="box" id="section1.3">
            <h2>content 1.3</h2>
        </div>
        <div class="box" id="section1.4">
            <h2>content 1.4</h2>
        </div>
        <div class="box" id="section1.5">
            <h2>content 1.5</h2>
        </div>
        <div class="box" id="section1.6">
            <h2>content 1.6</h2>
        </div>
    </div>
    <div id="div2">
        <div class="box" id="section2.1">
            <h2>content 2.1</h2>
        </div>
        <div class="box" id="section2.2">
            <h2>content 2.2</h2>
        </div>
        <div class="box" id="section2.3">
            <h2>content 2.3</h2>
        </div>
        <div class="box" id="section2.4">
            <h2>content 2.4</h2>
        </div>
        <div class="box" id="section2.5">
            <h2>content 2.5</h2>
        </div>
        <div class="box" id="section2.6">
            <h2>content 2.6</h2>
        </div>
    </div>
</div>
...