Простой JavaScript - ScrollIntoView внутри Div

Question

Простой JavaScript - ScrollIntoView внутри Div

1

У меня есть требование прокрутки определенного элемента внутри div (а не прямого дочернего) в представлении.

В основном мне нужны те же функции, что и ScrollIntoView, но для указанного родителя (только этот родитель должен прокручивать).
Кроме того, я не могу использовать какие-либо сторонние библиотеки.

Я не совсем уверен в том, как подходить к этой проблеме, поскольку я очень ограничиваю разработку JavaScript. Есть ли кто-нибудь, кто мог бы мне помочь?

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

JDC 31 июль 2017, в 09:06

Источник

Теги:

javascript

scroll

3 ответа

0

Вы можете сделать несколько простых вещей, таких как:

function customScroll(id) {
    window.location.href = "#mydiv"+id;
}

В основном window.location.href должен помочь вам.

Tobias Alt 31 июль 2017, в 04:55

0

Кстати, идея "id" заключается в том, что вы можете использовать параметр GETURL - немного сложнее. Просто попробуйте window.location.href = "mydiv".
Tobias Alt 31 июль 2017, в 06:50
0

Разве это не прокручивает всю страницу? Я редактировал вопрос. Для меня было бы важно, чтобы прокручивал только указанный родитель.
JDC 31 июль 2017, в 06:50
0

Хорошо, теперь я понял - просто прыгнуть в родителя - это ваше требование. Тогда вам нужен дополнительный CSS.
Tobias Alt 31 июль 2017, в 06:54

Показать ещё 1 комментарий

0

Эта функциональность может быть достигнута в несколько шагов. Сначала вы получаете положение ребенка, используя childElement.getBoundingClientRect(); который вернет следующие значения

bottom : val
height: val
left: val
right: val
top: val
width: val

Затем просто поместите дочерний элемент в соответствии с верхними левыми значениями в родительский элемент, сохраняя position дочерних элементов как absolute. Родительская position элемента должна быть relative типом, чтобы правильно поместить ребенка и получить эффект от ScrollIntoView.

childElement.style.position = 'absolute';
childElement.style.top = 'value in px';
childElement.style.left = 'value in px';

Sumit 31 июль 2017, в 04:38

Ещё вопросы

Кстати, идея "id" заключается в том, что вы можете использовать параметр GETURL - немного сложнее. Просто попробуйте window.location.href = "mydiv".
Разве это не прокручивает всю страницу? Я редактировал вопрос. Для меня было бы важно, чтобы прокручивал только указанный родитель.
Хорошо, теперь я понял - просто прыгнуть в родителя - это ваше требование. Тогда вам нужен дополнительный CSS.

Jordan Maduro · Accepted Answer · 2017-07-31T07-27-00.000Z

Думаю, у меня есть для тебя начало. Когда вы думаете об этой проблеме, вы думаете о том, чтобы сделать дочерний div в видимой области родителя. Один наивный способ - использовать дочернюю позицию на странице относительно родительской позиции на странице. Затем, учитывая свиток родителя. Это возможная реализация.

function scrollParentToChild(parent, child) {

  // Where is the parent on page
  var parentRect = parent.getBoundingClientRect();
  // What can you see?
  var parentViewableArea = {
    height: parent.clientHeight,
    width: parent.clientWidth
  };

  // Where is the child
  var childRect = child.getBoundingClientRect();
  // Is the child viewable?
  var isViewable = (childRect.top >= parentRect.top) && (childRect.top <= parentRect.top + parentViewableArea.height);

  // if you can't see the child try to scroll parent
  if (!isViewable) {
    // scroll by offset relative to parent
    parent.scrollTop = (childRect.top + parent.scrollTop) - parentRect.top
  }


}

Просто передайте ему родительский и дочерний узлы следующим образом:

scrollParentToChild(parentElement, childElement)

Добавлено демо, использующее эту функцию для основного элемента и даже вложенных элементов

https://jsfiddle.net/nex1oa9a/1/

Спасибо, это помогло мне как начало!
спасибо, ты спас меня! Пытался добиться этого за 3 часа, замечательно! еще раз спасибо!