{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":129,"style":"BOLD"},{"length":7,"offset":132,"style":"BOLD"}],"text":"Привет друг! В этой статье попробую описать, один из вариантов автоматического скролла к последнему, приходящему сообщению в чате. В React приложении.","type":"unstyled","key":"b649g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"ITALIC"},{"length":1,"offset":19,"style":"ITALIC"}],"text":"Минута саморекламы\uD83D\uDE07:","type":"unstyled","key":"41bps"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":34,"offset":33}],"inlineStyleRanges":[{"length":68,"offset":0,"style":"ITALIC"}],"text":"Хочешь порядка в коде, тебе сюда https://dzen.ru/a/Z1iL1J62BiwFEYgd.","type":"unstyled","key":"en5d5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Ну а теперь, поехали!\uD83D\uDEFC","type":"unstyled","key":"fude3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Создаём болванку","type":"header-three","key":"9ccre"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":59,"style":"ITALIC"}],"text":"Как болванку буду использовать собранный проект при помощи vite:","type":"unstyled","key":"3fi5l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":128,"style":"ITALIC"},{"length":1,"offset":184,"style":"ITALIC"},{"length":1,"offset":546,"style":"ITALIC"},{"length":2,"offset":714,"style":"ITALIC"}],"text":"import { useState } from 'react'\nimport reactLogo from './assets/react.svg'\nimport viteLogo from '/vite.svg'\nimport './App.css'\n\nfunction App() {\nconst [count, setCount] = useState(0)\n\nreturn (\n<>\n

\n\n $\"Vite$ \n\n\n $\"React$ \n\n

Vite + React

\n\n

\nEdit src/App.tsx and save to test HMR\n

\nClick on the Vite and React logos to learn more\n

\n\n)\n}\n\nexport default App","type":"blockquote","key":"7dbi0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Создаём компоненты","type":"header-three","key":"hqqf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":24,"style":"ITALIC"},{"length":15,"offset":38,"style":"ITALIC"},{"length":9,"offset":75,"style":"ITALIC"},{"length":17,"offset":86,"style":"ITALIC"},{"length":9,"offset":104,"style":"ITALIC"}],"text":"Создадим две компоненты Display.tsx и MessageForm.tsx и немного подготовим App.tsx, на MessageForm.tsx и App.tsx подробно останавливаться не буду, статья не об этом. Круто отмазался от того, что мне лень ?\uD83D\uDE07","type":"unstyled","key":"6as7f"},{"data":{"image":{"id":"676340d9bda341366bf67630"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"bvb33"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"ITALIC"}],"text":"App.tsx:","type":"unstyled","key":"f1lvf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import {useState} from \"react\";\n\nimport {Display} from \"./display/Display.tsx\";\nimport {MessageForm} from \"./messageForm/MessageForm.tsx\";\n\nimport s from './App.module.css';\n\nexport type MessageType = {\n id: string,\n title: string\n};\n\nexport const App = () => {\n\n const [messages, setMessages] = useState([{id:'1', title: 'hello friend'}]);\n\n const setMessageHandler = (newMessageTitle: string) => {\n const newMessage = {\n id: `${Date.now()}`,\n title: newMessageTitle,\n };\n setMessages([...messages, newMessage]);\n };\n\n return (\n

\n \n \n

\n )\n};","type":"blockquote","key":"eios8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".appContainer {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n min-height: 100vh;\n min-width: 100vh;\n gap: 5px;\n}","type":"blockquote","key":"aahmb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"messages - состояние для хранения сообщений.","type":"unordered-list-item","key":"4i5u0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"setMessageHandler - функция для добавления сообщения.","type":"unordered-list-item","key":"9rrpm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"ITALIC"}],"text":"MessageForm.tsx:","type":"unstyled","key":"9gujr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import {ChangeEvent, FC, useState} from \"react\";\n\nimport s from './MessageForm.module.css'\n\ninterface IMessageForm {\n setMessageHandler: (newMessageTitle: string) => void;\n}\n\nexport const MessageForm: FC = ({ setMessageHandler }) => {\n const [inputValue, setInputValue] = useState('');\n\n const onInputChange = (e: ChangeEvent) => {\n setInputValue(e.target.value);\n };\n\n const onAddMessage = () => {\n if (inputValue.trim()) {\n setMessageHandler(inputValue);\n setInputValue(\"\");\n }\n };\n\n return (\n

\n \n \n

\n );\n};","type":"blockquote","key":"9jbhe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"ITALIC"}],"text":"Display.tsx","type":"unstyled","key":"d9vrf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import {FC} from \"react\";\n\nimport {MessageType} from \"../App.tsx\";\n\nimport s from './Display.module.css';\n\ninterface IDisplay {\n messages: MessageType[]\n}\n\nexport const Display: FC = ({messages}) => {\n \n return (\n

\n {messages.map(message => (\n

\n {message.title}\n

\n ))}\n

\n );\n};","type":"blockquote","key":"757f0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".displayContainer {\n display: flex;\n flex-direction: column;\n min-width: 100vh;\n border: 1px solid black;\n border-radius: 25px;\n padding: 10px;\n background-color: #f9f9f9;\n\n .message {\n margin-bottom: 5px;\n padding: 5px;\n border-radius: 5px;\n background-color: #f0f0f0;\n }\n}","type":"blockquote","key":"ar7u6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Пишем логику для автоскролла","type":"header-three","key":"7uvsg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":39,"style":"ITALIC"}],"text":"И так всё волшебство будет проходить в Display.tsx. ","type":"unstyled","key":"beqab"},{"data":{"image":{"id":"676359bc2001ff17cd6e20de"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"4cba9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":48,"style":"ITALIC"},{"length":11,"offset":188,"style":"ITALIC"},{"length":3,"offset":210,"style":"ITALIC"}],"text":"Для достижения сего действия нам нужен доступ к DOM элементу для взаимодействия с ним (включая специфические свойства и методы DOM-элемента), в нашем случаем родительская дивка компоненты DIsplay.tsx, а значит ref - в студию. Ну и парочку состояний, позицию вертикального скролла в момент прокрутки и флажок для определения того, скролим, мы в итоге или где?.","type":"unstyled","key":"dii0l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const containerRef = useRef(null);\nconst [lastScrollTop, setLastScrollTop] = useState(0);\nconst [isAutoScroll, setIsAutoScroll] = useState(true);","type":"blockquote","key":"822hj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":17,"style":"ITALIC"}],"text":"Создадим функцию scrollEventHandler которая будет:","type":"unstyled","key":"3ou4n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":37,"style":"ITALIC"}],"text":"Вычислять текущую позицию прокрутки (scrollTop).","type":"unordered-list-item","key":"9a5ia"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Определять, идет ли прокрутка вниз и находится ли пользователь внизу контейнера.","type":"unordered-list-item","key":"8g3c8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":39,"style":"ITALIC"}],"text":"Включать или отключать авто-прокрутку (isAutoScroll).","type":"unordered-list-item","key":"66vpl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":42,"style":"ITALIC"}],"text":"Обновлять предыдущее положение прокрутки (lastScrollTop) для следующего вызова.","type":"unordered-list-item","key":"djjle"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const scrollEventHandler = (event: React.UIEvent) => {\n const element = event.currentTarget;\n const maxScrollPosition = element.scrollHeight - element.clientHeight;\n\n if (element.scrollTop > lastScrollTop && Math.abs(maxScrollPosition - element.scrollTop) < 10) {\n setIsAutoScroll(true);\n } else {\n setIsAutoScroll(false);\n }\n setLastScrollTop(element.scrollTop);\n};","type":"blockquote","key":"fq4og"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"const element = event.currentTarget;","type":"unordered-list-item","key":"2n7q2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"ITALIC"},{"length":3,"offset":91,"style":"ITALIC"},{"length":12,"offset":103,"style":"ITALIC"}],"text":"event.currentTarget — это элемент, на котором произошло событие (в данном случае контейнер div с рефом containerRef).","type":"unstyled","key":"fgh5o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":70,"offset":0,"style":"BOLD"}],"text":"const maxScrollPosition = element.scrollHeight - element.clientHeight;","type":"unordered-list-item","key":"8rq6u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":0,"style":"BOLD"}],"text":"1. Вычисляем максимальную возможную позицию прокрутки.","type":"unstyled","key":"bdgv3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"2. element.scrollHeight: Полная высота контента внутри элемента (включая прокрученную и видимую части).","type":"unstyled","key":"f0qjn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"3. element.clientHeight: Высота видимой области элемента.","type":"unstyled","key":"ftalo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разница между ними дает максимальную позицию, на которую можно прокрутить элемент вниз.","type":"unstyled","key":"7nptm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":96,"offset":0,"style":"BOLD"}],"text":"if (element.scrollTop > lastScrollTop && Math.abs(maxScrollPosition - element.scrollTop) < 10) {","type":"unordered-list-item","key":"basbp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"BOLD"},{"length":37,"offset":26,"style":"BOLD"},{"length":3,"offset":122,"style":"BOLD"},{"length":9,"offset":126,"style":"BOLD"},{"length":2,"offset":218,"style":"BOLD"},{"length":52,"offset":221,"style":"BOLD"}],"text":"1. Проверяем два условия:\n1.1 element.scrollTop > lastScrollTop: Прокрутка идет вниз (текущая позиция больше предыдущей).\n1.2 scrollTop: Текущее расстояние от верхнего края контейнера до верхней прокручиваемой части.\n\n2. Math.abs(maxScrollPosition - element.scrollTop) < 10:","type":"unstyled","key":"fkd1l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Контейнер находится близко к нижней границе (разница менее 10px).","type":"unstyled","key":"8gpb3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"Итог: Если пользователь прокручивает вниз и находится почти внизу контейнера, активируется авто-прокрутка.","type":"unstyled","key":"984t0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"setIsAutoScroll(true);","type":"unordered-list-item","key":"4cokh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":24,"style":"ITALIC"},{"length":4,"offset":39,"style":"ITALIC"}],"text":"Устанавливаем состояние isAutoScroll в true, сигнализируя, что авто-прокрутка включена.","type":"unstyled","key":"c3v0f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"BOLD"}],"text":"} else { setIsAutoScroll(false); }","type":"unordered-list-item","key":"8i4i1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если хотя бы одно из условий не выполняется (например, пользователь прокручивает вверх или находится не внизу контейнера):","type":"unstyled","key":"kt52"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":14,"style":"ITALIC"},{"length":5,"offset":29,"style":"ITALIC"}],"text":"Устанавливаем isAutoScroll в false, сигнализируя, что авто-прокрутка отключена.","type":"unstyled","key":"al1gu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"setLastScrollTop(element.scrollTop);","type":"unordered-list-item","key":"3gj7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":19,"style":"ITALIC"},{"length":9,"offset":61,"style":"ITALIC"}],"text":"Обновляем значение lastScrollTop текущей позицией прокрутки (scrollTop).","type":"unstyled","key":"4httb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это необходимо для сравнения в следующем вызове функции, чтобы определить направление прокрутки (вверх или вниз).","type":"unstyled","key":"4v27c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":176,"style":"ITALIC"},{"length":21,"offset":226,"style":"ITALIC"},{"length":12,"offset":277,"style":"ITALIC"},{"length":10,"offset":303,"style":"ITALIC"}],"text":"Уже почти, ещё немного \uD83E\uDD29.\nИ так мы создали функцию для отслеживания и включения прокрутки, но чего то не хватает отслеживания в реальном времени прокручивать или нет состояние isAutoScroll, а так же добавления нового сообщения messages. useEffect скадыщь\uD83E\uDE84! Иными словами, если isAutoScroll изменилось → useEffect выполняется:","type":"unstyled","key":"557eg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"useEffect(() => {\n if (isAutoScroll && containerRef.current) {\n containerRef.current.scrollTo({\n top: containerRef.current.scrollHeight,\n behavior: 'smooth'\n });\n }\n}, [isAutoScroll, messages]);","type":"blockquote","key":"clvit"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":11,"style":"ITALIC"},{"length":14,"offset":28,"style":"ITALIC"}],"text":"Обновление isAutoScroll или lastScrollTop вызывает повторный рендер.","type":"unstyled","key":"4pvrh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"ITALIC"},{"length":13,"offset":48,"style":"ITALIC"},{"length":8,"offset":65,"style":"ITALIC"}],"text":"useEffect срабатывает при изменении зависимости isAutoScroll или messages:","type":"unstyled","key":"9cmhi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если isAutoScroll стало true: Контейнер автоматически прокручивается вниз (до конца) через scrollTo.","type":"unordered-list-item","key":"469tl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если isAutoScroll стало false, useEffect не выполняет никаких действий, так как условие if (isAutoScroll && containerRef.current) не выполняется.","type":"unordered-list-item","key":"fjtmm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":56,"offset":0,"style":"BOLD"}],"text":"useEffect срабатывает при изменении зависимости messages:","type":"unordered-list-item","key":"a3icf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":5,"style":"ITALIC"},{"length":22,"offset":102,"style":"ITALIC"}],"text":"Если isAutoScroll === true, контейнер автоматически прокручивается вниз до последнего сообщения.\nЕсли isAutoScroll === false, прокрутка не происходит, так как пользователь уже отключил авто-прокрутку, взаимодействуя с контейнером вручную.\n","type":"unstyled","key":"eujv2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"scrollEventHandler не срабатывает:","type":"unordered-list-item","key":"3e7vh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это происходит, потому что добавление нового сообщения само по себе не вызывает события прокрутки. Событие прокрутки срабатывает только при взаимодействии пользователя.","type":"unstyled","key":"7mht7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":31,"style":"ITALIC"}],"text":"Хорошо бы не забыть про стили:\nDisplay.module.css:","type":"unstyled","key":"eamfr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".displayContainer {\n display: flex;\n flex-direction: column;\n height: 300px;\n min-width: 100vh;","type":"blockquote","key":"bmdei"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* Включен скролл */\n overflow-y: scroll;","type":"blockquote","key":"7kehv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n border: 1px solid black;\n border-radius: 25px;\n padding: 10px;\n background-color: #f9f9f9;","type":"blockquote","key":"1huno"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* Скрытие полосы прокрутки в Firefox */\n scrollbar-width: none;\n\n .message {\n margin-bottom: 5px;\n padding: 5px;\n border-radius: 5px;\n background-color: #f0f0f0;\n }\n}\n","type":"blockquote","key":"1f4lk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* Скрытие полосы прокрутки (Chrome, Safari, Edge) */\n.displayContainer::-webkit-scrollbar {\n display: none;\n}","type":"blockquote","key":"bptbm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":0,"style":"BOLD"}],"text":"Итого, если двумя словами разумеется:","type":"unstyled","key":"1uitp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":38,"style":"ITALIC"},{"length":12,"offset":161,"style":"ITALIC"}],"text":"Пользователь прокручивает контейнер → scrollEventHandler срабатывает: Определяет, находится ли пользователь внизу и прокручивает ли он вниз.\nОбновляет состояние isAutoScroll.","type":"ordered-list-item","key":"8fhgd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":5,"style":"ITALIC"},{"length":10,"offset":31,"style":"ITALIC"}],"text":"Если isAutoScroll изменилось → useEffect выполняется: Прокручивает контейнер вниз, если включена авто-прокрутка.","type":"ordered-list-item","key":"3ktmc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":32,"style":"ITALIC"},{"length":21,"offset":96,"style":"ITALIC"}],"text":"Если приходит новое сообщение → useEffect выполняется: Прокручивает контейнер вниз, только если isAutoScroll === true.\n","type":"ordered-list-item","key":"4ma1a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":23,"style":"ITALIC"},{"length":10,"offset":85,"style":"ITALIC"},{"length":13,"offset":134,"style":"ITALIC"},{"length":8,"offset":151,"style":"ITALIC"},{"length":27,"offset":54,"style":"BOLD"},{"length":25,"offset":107,"style":"BOLD"}],"text":"Таким образом, функция scrollEventHandler срабатывает только на событие прокрутки, а useEffect срабатывает на изменение зависимостей (isAutoScroll или messages).","type":"unstyled","key":"5otgq"},{"data":{"image":{"id":"67635a88cbcf7e294ef8f7ea"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"bq0f7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. Итоговый код","type":"header-three","key":"btj3a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":9,"style":"ITALIC"}],"text":"Итоговый Display.tsx:","type":"unstyled","key":"e6qs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":474,"style":"ITALIC"},{"length":4,"offset":693,"style":"ITALIC"}],"text":"import {FC, useEffect, useRef, useState} from \"react\";\n\nimport {MessageType} from \"../App.tsx\";\n\nimport s from './Display.module.css';\n\ninterface IDisplay {\n messages: MessageType[]\n}\n\nexport const Display: FC = ({messages}) => {\n const containerRef = useRef(null);\n const [lastScrollTop, setLastScrollTop] = useState(0);\n const [isAutoScroll, setIsAutoScroll] = useState(true);\n\n const scrollEventHandler = (event: React.UIEvent) => {\n const element = event.currentTarget;\n const maxScrollPosition = element.scrollHeight - element.clientHeight;\n\n if (element.scrollTop > lastScrollTop && Math.abs(maxScrollPosition - element.scrollTop) < 10) {\n setIsAutoScroll(true);\n } else {\n setIsAutoScroll(false);\n }\n setLastScrollTop(element.scrollTop);\n };\n\n useEffect(() => {\n if (isAutoScroll && containerRef.current) {\n containerRef.current.scrollTo({\n top: containerRef.current.scrollHeight,\n behavior: 'smooth'\n });\n }\n }, [isAutoScroll, messages]);\n\n return (\n

\n {messages.map(message => (\n

\n {message.title}\n

\n ))}\n

\n );\n};","type":"blockquote","key":"bvf1i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".displayContainer {\n display: flex;\n flex-direction: column;\n height: 300px;\n min-width: 100vh;\n overflow-y: scroll;\n border: 1px solid black;\n border-radius: 25px;\n padding: 10px;\n background-color: #f9f9f9;\n scrollbar-width: none;\n\n .message {\n margin-bottom: 5px;\n padding: 5px;\n border-radius: 5px;\n background-color: #f0f0f0;\n }\n}\n\n.displayContainer::-webkit-scrollbar {\n display: none;\n}","type":"blockquote","key":"58gbf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ну вот собственно и всё \uD83D\uDE80\uD83D\uDE80\uD83D\uDE80.","type":"unstyled","key":"c5lsl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Спасибо за внимание! До Новых Встреч!\uD83E\uDD17\uD83E\uDD17\uD83E\uDD17","type":"unstyled","key":"35gko"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"iClkLWEJWyw5IFTI8AuC"}],"entityMap":{"0":{"data":{"badSeoLink":"true","url":"https://dzen.ru/a/Z1iL1J62BiwFEYgd"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}