Как сделать прокрутку внутри модального окна?

Question

[Alexsey]

При открытии модального окна хочу сделать прокрутку внутри div до последнего элемента.
Делаю вот так..но не работает.

var messagelist= document.getElementById("messagelist");
  messagelist.scrollTop = messagelist.scrollHeight;

Comments

[Александр Цымбал]

Ankhena, подскажите молодежи, как правильно делать в 2022?

[Александр Цымбал]

А если по делу, то вот мой ответ, очень просто делается на jQuery:
$("#messagelist").scrollTop(1000000);
Да, это jQuery. Сейчас меня обвинит куратор тега CSS, что jQuery не модно в 2022?
В то время как jQuery используется в 2022 на 70% сайтов.

Убедитесь, что у #messagelist включен вертикальный скролл в css: overflow-y: overlay;. Ankhena, пожалуйста, подскажите, моден ли данный способ включения прокрутки в 2022?

[Sergei Nazarenko]

Александр Цымбал, модно, не модно, лучше ты расскажи зачем тебе жиквери в 2022? Использование какого либо инструмента должно быть оправдано а не ну умею жиквери значит буду использовать жиквери. Зачем тянуть лишнюю лимбу если можно совершенно спокойно и элегантно решить задачу без неё?

[Ankhena]

Александр Цымбал,

Убедитесь, что у #messagelist включен вертикальный скролл в css: overflow-y: overlay;. Ankhena, пожалуйста, подскажите, моден ли данный способ включения прокрутки в 2022?

У свойства overflow-y нет значения overlay.
Так что вряд ли этот способ модный.

Да, это jQuery. Сейчас меня обвинит куратор тега CSS, что jQuery не модно в 2022?
В то время как jQuery используется в 2022 на 70% сайтов.

Ваш код короче чистого js на немножко символов, а тянет за собой библиотеку.
Но да, если на сайте уже подключен jq, то нет причин его не использовать.

Правда, зачем бы тогда спрашивающий писал на чистом js...

[v3shin]

А вы скроллите после отрисовки модального окна?

[Александр Цымбал]

Sergei Nazarenko, вы говорите, что jquery в 2022 не нужен, исключительно потому, что все вокруг так говорят. Но все вокруг его используют. Это как с Apple - все вокруг плюются, но покупают. Значит, что-то в нём есть.
А что конкретно - я вам готов показать (доказать):

конструкция на ваниле, которой автор вопроса пытался описать нужную фичу:

var messagelist= document.getElementById("messagelist");
  messagelist.scrollTop = messagelist.scrollHeight;

конструкция на jquery, которой я описал решение этой же фичи:
$("#messagelist").scrollTop(1000000);

И вы мне будете рассказывать про элегантность ванилы?
Если jQuery подключить с CDN, то он в 99% случаев уже есть в кэше браузера на момент загрузки сайта, так что не переживайте о лишнем трафике и запросах.
И если у вас таких конструкций 20-30, то на чистой ваниле вам придётся написать ту же самую библиотеку jQuery по объему кода. Или обойтись 5КБ элегантного кода на jQuery.

Меньше читайте очень умных размышляторов, которые так не любят jQuery. Думайте сами. Используйте то, что вам удобно, а не то, что считают удобным ваши учителя.

И по поводу "модно-немодно" - вы не поняли контекста. Он из другого вопроса, где мы с тем, кому я это адресовал, на эту тему беседовали.

[Александр Цымбал]

Ankhena, насчёт overflow-y: overlay не прав. признаю! overflow-y: scroll - правильно. но тоже, наверное, не модно.

[Sergei Nazarenko]

Александр Цымбал, Какие нахрен учителя что черт возьми такое ты несешь? Посмотри вакансии и увидишь что jQ - сегодня не моЖно, оно было моЖно когда JS , был некрасивый и не было всяких там Vue, react, Angular и иже сними. а после апгрейда JS до ES6 можно сказать вообще отпала необходимость в jQuery.
Просто почувствуй разницу вакансий по России на hh.ru где jquery и где Angular

[Alexsey]

Коллеги, очень жаль что мой вопрос вызвал такую бурную дискуссию.
Пока у меня не работает скролл как мне хотелось, но дело скорей в моих кривых руках.
Буду разбираться дальше. Всем спасибо за дискуссию.

[Александр Цымбал]

Sergei Nazarenko, мы с одного города, видимо, это даёт вам ощущение, что со мной можно на "ты". Пусть будет так.
Вероятно, вы не совсем правильно понимаете смысл jQuery. Это не того уровня инструмент. Это не технология, это прикладная штука. Поэтому и вакансий на jQuery немного. Она как приложение к JS. Я вообще ни разу не встречал вакансию "jQuery -разработчик". Таких людей нет. Все, кто знают JS 10+ лет, знают jQuery. Это данность. Молодое поколение уже не знает. И от этого топит про то, что это не моЖно. Ещё как моЖно. Повторюсь, jQuery подключен на 70% сайтов по всему миру. Как бы вы не сопротивлялись. Это как моЖно хейтить php, говоря, что он - прошлый век. Просто потому что он чуточку сложнее питона, и питон моЖный.

[Александр Цымбал]

Alexsey, скажите, у вас jQuery в проекте подключен? У вас и с ним не получается?

Answer 1

[Sergei Nazarenko]

Comments

[Александр Цымбал]

чё-т как-то не работает вроде. прокрутки нет. но зато без jQuery! Это важно!

[Sergei Nazarenko]

все там работает scroll top 0 поставь значение какое надо и будет все как ты захочешь. он же не сказал что ему надо в самый низ прокрутить а вот это вот 1000000 неправильно правильно высоту определять и на основании этого прокручивать.

document.querySelector('.modal').scrollTop = document.querySelector('.modal').scrollHeight;

и будет тебе ЩАСЬЯ
или даже по фенЬщую

const modal = document.querySelector(".modal"),
     button = document.querySelector("button");

button.onclick = () => {
    modal.classList.toggle("hidden");
    modal.scrollTop = modal.scrollHeight;
}

Answer 2

[Александр Цымбал]

Осторожно, использовался элегантный jQuery! Используйте на свой страх и риск. Потому что тут говорят, что не модно (facepalm)

Comments

[Sergei Nazarenko]

Осторожно, использовался элегантный jQuery!

вот это вот

scrollTop(1000000)

не элегантно

[Ankhena]

Ну да, на js существенно длиннее.

const modal = document.querySelector('.modal')
document.querySelector('button').addEventListener('click', () => {
  modal.classList.toggle('hidden');
  modal.scrollTop = modal.scrollHeight;
})

говорят, что не модно

Вообще-то вам говорили не про моду, а про целесообразность. В этом вопросе у jq нет преимущества.

Но самое главное, что в вопросе ванилька, а не jq. Так что спорить тут не о чем.

[Александр Цымбал]

Ankhena, классно. Обижать можно, обижаться нельзя. Это в правилах площадки прописано? Это во-первых. Во-вторых, я не могу назвать это на 100% обидой. Это наполовину задор и троллинг.

[Александр Цымбал]

Sergei Nazarenko, зато на 100% понятно. И на 100% работает. Есть такая философия кодинга KISS. Писать такой код, который понятен даже джуну сразу, и от этого он чувствует себя самым умным и мотивируется разбирать код дальше.

[Sergei Nazarenko]

Александр Цымбал, в споре рождается истина, ну вот хоть. Че ты говори мне но Jq устарел а с пыхой другая ситуация, Но и он умрет возможно, питон выстрелил, а ruby нет. Js вообще загибался и было не модно но в итоге победил с помощью jquery всякие сильверлайты и прочее. Но jq сделал своё дело и теперь должен умереть. Все течёт и все меняется и у меня нет предвзятости к языкам . Но jquery устарел и это факт.

[Александр Цымбал]

Sergei Nazarenko, а почему jQuery устарел? Потому что все вокруг так говорят? Или все же есть возможность по пунктам (хотя бы парочку) объяснить. Я, вот, вижу преимущества:
1. Гораздо короче код. Например, в части ajax-запросов там вообще в одну строку можно загрузить нужный контент с нужного урла. На ванильке нужно сшить простыню из кода для этого. Либо подключить другую отдельную библиотеку. Ахахапхахпха.
2. Он используется повсюду. От Битрикса до вордпресса. Везде. В ядрах cms! Откройте любой сайт рядовой компании - на нем подключен jQuery.
3. Очень понятный и стильный код. Короткие строки, легко воспринимать.

А минусы какие? То, что он весит 100+ КБ? И это целый отдельный запрос? [OMG]

Ааа, минус такой: я её не знаю, поэтому она оцтой.

[Sergei Nazarenko]

Александр Цымбал, аргумент намбер 546 почему жиклёр устарела патамушта основная цель JQ была обход серьезной несовместимости разных браузеров и предоставление унифицированного api, теперь это уже не актуально в 99% случаев , браусёры подросли и больше в этом не нуждаются, сами могут) Ну просто нах надо если и без нее неплохо получается тоже самое, сегодня она несет только синтаксический сахар и больше ничего. Из этого вытекает позишн намбер тво: чистый жс дает больше гибкости и для программиста одна-две "лишних" строчки погоду не делают, за то гибкость, быстрота и функциональность и не тащт всякий шлак в проект. и тут дело даже не в скорости. Избыточность.
аргумента под номером сри Концепция поменялась и стало не модно оперировать над состояниями DOM а это все что умеет жиклёр, но это умеет и чистый жс, и кроме всего прочего преимущество над чистым у жиквери только одно это синтаксический сахар и на этом как бы все. Крч дальше не буду комментировать просто оставлю ссылку https://www.webcomponents.org и скажу ну просто жиклёров уже все морально устарел да он есть никуда от него не деться но он уже давно не торт.

2. Он используется повсюду. От Битрикса до вордпресса. Везде. В ядрах cms! Откройте любой сайт рядовой компании - на нем подключен jQuery.

открываем Хабр и не видим там жиквери.
Читаем и видим GitHub отказался от жиквери и вообще каких либо фреймворков в пользу чистого жс.
открываем , бутстрап и видим

Bootstrap 5 is designed to be used without jQuery,

открываем какой нибудь https://loremipsum.io и там застежка от ремня-муха тоже нет жиквери
не ну на телеграм не будем смотреть там жиквери нету пахнуть совсем - там тайпскрипт в перемешку с чистым.
Ну ладно чем мы по продвинутым давай возьмем малознакомое чет типа https://soundsession.center/lite опа и тут нет жиквери значит все же не повсюду.

зато на 100% понятно.

просто оставлю ссылку https://ru.stackoverflow.com/questions/282035/Как-...

Писать такой код, который понятен даже джуну сразу

Ну да ну да.

в части ajax-запросов там вообще в одну строку можно загрузить нужный контент с нужного урла.

https://developer.mozilla.org/en-US/docs/Web/API/F...

fetch('http://example.com/movies.json')
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    console.log(data);
  });