Question

我试图在IR上下移动时始终保持可见，但有时它会超出父母的边界。

我不想每次单击按钮时都滚动父级，但前提是t1 = Template("{% for i in range(0, a1) %}|{{ mylist1[i] }}\n" " {% for j in range(0, (20 - (mylist1[i]|length))) %}\n" " {{ space }}\n" " {% endfor %}|{{ dicts[mylist1[i]][dicts[mylist1[i]].keys()[0]] }}\n" " {% for j in range(0, (20 - (dicts[mylist1[i]][dicts[mylist1[i]].keys()[0]]|length))) %}\n" " {{ space }}\n" " {% endfor %}|\\n{{ string }}\n" # Notice "\\n" to keep it for Jinja. "{% endfor %}")靠近顶部/底部边框。

有帮助吗？

titleact

titleact

$('.title').on('click', function() {
  $('.titleact').removeClass('titleact');
  $(this).addClass('titleact');
});

$('.btnup').click(function() {
  let obj = $('.titleact');
  let i = obj.index('.title');
  if (i == 0) {
    return;
  }
  let targ = $('.title').eq(i - 1);
  obj.insertBefore(targ);

  let parent = obj.parent();
  if (obj.offset().top <= parent.offset().top) {
    parent.animate({
      scrollTop: parent.scrollTop() - parent.height() - obj.position().top
    });
  }
});

$('.btndown').click(function() {
  let obj = $('.titleact');
  let i = obj.index('.title');
  let count = $('.title').length;
  if (i == count - 1) {
    return;
  }
  let targ = $('.title').eq(i + 1);
  obj.insertAfter(targ);

  let parent = obj.parent();
  let h1 = obj.outerHeight(true);
  if (obj.offset().top + h1 >= parent.offset().top + parent.height()) {
    parent.animate({
      scrollTop: parent.scrollTop() + parent.height() - h1
    });
  }
});

Answer 1

我采用了原始脚本，并做了一些我认为可以做的更改。注意事项：

在某些情况下，移动元素似乎会影响滚动，因此我让它在移动元素后立即恢复了原始的scrollTop。
通过找到titleact元素与列表中第一个元素之间的位置差来计算新的滚动位置。

$('.title').on('click', function() {
  $('.titleact').removeClass('titleact');
  $(this).addClass('titleact');
});

$('.btnup').click(function() {
  let obj = $('.titleact');
  let i = obj.index('.title');
  if (i == 0) {
    return;
  }
  let parent = obj.parent();
  let origScrollTop = parent.scrollTop();
  let targ = $('.title').eq(i - 1);
  targ.before(obj)
  parent.scrollTop(origScrollTop);

  if (obj.offset().top < parent.offset().top) {
    let first = parent.find(":first");
    parent.animate({
      scrollTop: obj.position().top - first.position().top - parent.height() + obj.outerHeight(true)
    });
  }
});

$('.btndown').click(function() {
  let obj = $('.titleact');
  let i = obj.index('.title');
  let count = $('.title').length;
  if (i == count - 1) {
    return;
  }
  let parent = obj.parent();
  let origScrollTop = parent.scrollTop();
  let targ = $('.title').eq(i + 1);
  targ.after(obj)
  parent.scrollTop(origScrollTop);

  if (obj.offset().top + obj.outerHeight(true) > parent.offset().top + parent.height()) {
    let first = parent.find(":first");
    parent.animate({
      scrollTop: obj.position().top - first.position().top
    });
  }
});

.parent {
  border: 2px solid lightseagreen;
  height: 120px;
  overflow-y: scroll;
}

.title {
  padding: 2px 0;
  margin: 3px 0;
  cursor: pointer;
}

.titleact {
  background: gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent' id='parent'>
  <div class='title titleact'>lorem ipsum 1</div>
  <div class='title'>lorem ipsum 2</div>
  <div class='title'>lorem ipsum 3</div>
  <div class='title'>lorem ipsum 4</div>
  <div class='title'>lorem ipsum 5</div>
  <div class='title'>lorem ipsum 6</div>
  <div class='title'>lorem ipsum 7</div>
  <div class='title'>lorem ipsum 8</div>
  <div class='title'>lorem ipsum 9</div>
  <div class='title'>lorem ipsum 10</div>
  <div class='title'>lorem ipsum 11</div>
  <div class='title'>lorem ipsum 12</div>
  <div class='title'>lorem ipsum 13</div>
  <div class='title'>lorem ipsum 14</div>
  <div class='title'>lorem ipsum 15</div>
</div>
<br>
<button class='btnup'>UP</button>
<button class='btndown'>DOWN</button>

上下移动元素时始终保持可见

1 个答案: