#scroll

리액트에서 이벤트 루프관련해서 질문이 있습니다

안녕하세요. 리액트에서 이벤트 루프 동작 관련해서 제가 이해한내용이 맞는지 질문드립니다! 코드를 간단히 설명드리면 List를 그리는 scroll container가 있고 아이템이 추가되면 마지막으로 추가된 아이템으로 스크롤을 시키려는 코드입니다. (useEffect를 사용해도 되지만 이벤트 루프를 이해하기 위해서 작성하였습니다!) 스크롤을 시키기 위해 작성한 코드는 세가지입니다! 1번 코드는 스크롤이 되지 않습니다. 이유는 리액트에서 batch 업데이트 과정에서 렌더링되기 전에 호출되었으니 스크롤이 되지 않습니다. 2번 코드는 스크롤이 되었습니다. 리액트의 상태변화는 마이크로태스크큐에서 실행이 되었고 렌더링이 발생한 후에 매크 태스크큐가 실행되기 때문에 올바르게 렌더링 후에 실행이 되었습니다. 3번 코드는 스크롤이 되었습니다. 이건 이유를 정확히 모르겠습니다. 개발자 도구에서 실행된 시점을 봐도 마이크로태스크큐에서 스크롤 함수가 실행되었지만 올바르게 실행이 되었습니다. 마이크로 태스크 큐 실행과정에서 appenchild가 발생하고나서 렌더링이 되기전에 이미 레이아웃이 다 계산은 완료가 되는걸까요? 어떻게 이해를 해야될지 모르겠습니다.

React Next infinite scroll

A 라는 infinite scroll페이지에서 500개 데이터를 보여주고 scroll은 70프로 내려왔다고 가정했을 때 다른 페이지 갔다가 돌아왔을 때 500개 데이터랑 scroll 위치 그대로 유지하는 좋은 방법 뭐 있을까요? localstorage나 context 이용했을때는 dom을 다시 랜더링하고 state 값을 다시 주입 했을 때 부드럽지 않은 느낌입니다. redux를 이용해서 전역으로 상태값을 저장해 놓고 컴포넌트에서 사용하면 될까요?

리액트 가로 스크롤

리액트에서 가로 스크롤을 구현할 때 flex에 overflow 스크롤로 지정 후 scrollbarWidth를 none으로 지정하면 작동이 잘됩니다. 그런데 서치해보니 마우스 이벤트를 받아와서 구현하던데 제가 놓치고 있는 부분이 있을까요.. 가로 스크롤 구현 시 따로 고려해야되는게 있는지 궁금합니다

리액트 네이티브 flatlist 관련 질문 받아주실 분 있으실까요?

제가 리액트 네이티브로, 위아래로 슬라이드 하면 한 달씩 넘어가는 캘린더를 만들고 있습니다. 그래서 전체를 FlatList로 만들고 스크롤 시 y인덱스를 받아와서 한 달씩 랜더하는 식으로 코드를 구현하였습니다. const handlePageChange = (newPage: number) => { if(newPage !=0) { const newDate = new Date(currentDate); newDate.setMonth(newDate.getMonth() + newPage); setCurrentDate(newDate); } }; return ( <FlatList data={[...Array(1).keys()]} keyExtractor={(item) => item.toString()} renderItem={({ item }) => ( <CalendarMonth currentDate={{ currentDate }} ClickedDate={{ ClickedDate }} setClickedDate={setClickedDate} /> )} horizontal={false} pagingEnabled= {true} showsVerticalScrollIndicator={false} scrollEventThrottle={100000} onScrollEndDrag={(event) => { const offset = event.nativeEvent.contentOffset.y; const direction = offset === 0 ? 0 : offset > 0 ? 1 : -1; handlePageChange(direction); }} /> ); 이런 식으로 코드를 구현하였는데 위로 잡아 올렸을 때 빈칸이 보이는데 저는 스크롤 시 모션은 보이지 않고 바로 다음 달력으로 넘어갔으면 합니다. 혹시 스크롤 시에 달력이 움직이지 않고 바로 넘어갈 수 있는 방법이 있을까요?

리액트 내비게이션 초기 데이터값 설정

import React, { useEffect, useState } from "react"; import { Link, useLocation } from "react-router-dom"; import { TbArrowBigUpFilled } from "react-icons/tb"; import useScroll from "../utils/useScroll"; import useProductsQuery from "../useProductsQuery"; const Nav = () => { const { isNavFixed } = useScroll(); const [activeButton, setActiveButton] = useState(0); const handleButtonClick = (index) => { setActiveButton(index); }; const categoryNames = { materials: "소재별 품목", purposes: "용도별 품목", }; const [isScrollMenuVisible, setScrollMenuVisible] = useState(false); const handleMouseEnter = () => { setScrollMenuVisible(true); }; const handleMouseLeave = () => { // console.log("마우스 이탈"); setScrollMenuVisible(false); }; const location = useLocation(); const isloginorsignup = location.pathname === "/login" || location.pathname === "/signup"; const { isLoading, isError, errorMessage, materials, purposes } = useProductsQuery(); const [hoveredOnedepth, setHoveredOnedepth] = useState(null); const [onedepthChildren, setOnedepthChildren] = useState([]); const [hoveredDivision, setHoveredDivision] = useState(null); const [twodepthDivision, setTwodepthDivision] = useState([]); const handleOnedepthMouseEnter = (item) => { setHoveredOnedepth(item); // console.log(setHoveredOnedepth) setOnedepthChildren(item.children); }; const handletwodepthMouseEnter = (child) => { setHoveredDivision(child); // console.log(setTwodepthDivision); setTwodepthDivision(child.divisions); // console.log(child.divisions); }; if (isLoading) return <>로딩 중...</>; if (isError) return <>{errorMessage}</>; return ( <> {!isloginorsignup ? ( <> {/* 대메뉴 */} <nav id="nav" className={`nav ${isNavFixed ? "fixed" : ""}`}> <div className="nav_wrap"> <div className="twobutton_wrap"> {["materials", "purposes"].map((category, index) => ( <Link type="button" className={`twobutton ${ activeButton === index ? "active" : "" }`} key={index} onClick={() => handleButtonClick(index)} to={`/${category}`} > {categoryNames[category]} </Link> ))} </div> {/* 내비게이션 1depth */} <div className="scrollnav"> <ul className="materialnav" style={{ display: activeButton === 0 ? "flex" : "none", }} > {materials.map((material) => ( <li key={material.id} className="materialnav_li" onMouseEnter={() => { handleOnedepthMouseEnter(material); handleMouseEnter(); }} onMouseLeave={handleMouseLeave} > <Link to="/">{material.name}</Link> </li> ))} </ul> <ul className="usagenav" style={{ display: activeButton === 1 ? "flex" : "none", }} > {purposes.map((purpose) => ( <li key={purpose.id} className="usagenav_li" onMouseEnter={() => { handleOnedepthMouseEnter(purpose); handleMouseEnter(); }} onMouseLeave={handleMouseLeave} > <Link to="/">{purpose.name}</Link> </li> ))} </ul> </div> <div className="call_wrap"> <div className="call"> <div className="call_title">견적 상담 · 문의 대표전화</div> <div className="top_button"> <TbArrowBigUpFilled className="top_icon" /> <p>TOP</p> </div> </div> </div> </div> </nav> {/* 2&3depth 호버 메뉴 */} <div className={`scrollmenu ${isScrollMenuVisible ? "show" : ""} ${ isNavFixed ? "fixed" : "" }`} style={{ visibility: isScrollMenuVisible ? "visible" : "hidden" }} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} > {activeButton === 0 && ( <div className="scrollmenu_top"> <ul className="depth2_wrap"> {onedepthChildren.map((child) => ( <li key={child.id} className="depth2_menu" onMouseEnter={() => { handletwodepthMouseEnter(child); }} > <div className="depth2_menu_img_wrap"> <div className="depth2_menu_img"> <img src={child.images[0]._links.href} alt={child.name} /> </div> </div> <p>{child.name}</p> </li> ))} </ul> </div> )} <div className="scrollmenu_middle"> <div className="depth3_wrap"> {twodepthDivision.map((division) => ( <Link key={division.id} to="/" className="depth3_menu"> <span className="depth3_menu_img"> {/* images 속성이 없거나 비어 있어도 오류를 방지 */} {division.images && division.images.length > 0 && ( <img src={division.images[0]._links.href} alt={division.division_name} /> )} </span> <p>{division.division_name}</p> </Link> ))} </div> </div> <div className="scrollmenu_bottom"></div> </div> </> ) : null} </> ); }; export default Nav; 현재는 depth2_menu 호버해야만 depth3_menu가 보이는데 초기에 scrollmenu가 보일때부터 depth2_menu가 (onedepthChildren.map의 첫번째 순서의 데이터가) 호버되어있어 그에 매칭되는 division의 내용들이 depth3_menu에 보이게 할수있는 방법 있을까요 ?

스크롤 이벤트가 있는 웹페이지 최적화에 대한 질문

스크롤을 내림에 따라 디자인이 동적으로 변하는 웹페이지들이 많은 것 같습니다 근데 대부분 컴포넌트는 observe되지 않는다면 성능메모리만 차지하고 필요가 없어보입니다 제 질문은 이런것들이 실제로 사용되나?입니다 1. 만약 어떤 section이 observe되지 않는다면 조건부 렌더링으로 (크기는 동일한)빈 컴포넌트(또는 정적인 컴포넌트)를 랜더링하도록 한다 (단 필요에 따라 상태나 데이터를 임시저장해야할 필요가 있겠네요) 2.따로 조건부 렌더링을 하지않고 observe되지않을때 성능과 메모리를 줄이기 위한 별도 테크닉을 사용한다(무엇이 있을까요?) 3.아무것도 필요없다 Useeffect안에 스크롤이벤트리스너를 추가하고 scrollY가 특정 주기마다 갱신되는 코드정도만 작성하면 된다 4.기타 물론 케바케긴 하지만 사례가 궁금해요

리액트 네이티브 스크롤 뷰 스크롤이 완전히 멈춘 경우를 핸들링하는 방법이 있을까요?

안녕하세요, RN으로 앱개발 중인 주니어 개발자입니다. 이번에 활성화 된 특정 범위로 이동시 그에 해당하는 날짜로 값을 설정하는 컴포넌트를 제작하고 있습니다. 예시를 들자면 아이폰의 갤러리의 영상 재생바와 유사합니다. 이를 위해 ScrollView에 horizontal 속성을 이용하여 변화하는 x값을 사용하여 진행 중 입니다. 다만, 이동이 완료된 뒤 해당 x값을 변환하여 상태를 변경하는 과정에서 막혀 도움을 얻고자 합니다. 손을 뗀 이후 스크롤이 완전히 멈춘 경우에 해당 값을 변경하고 싶은데, onScrollDragEnd 와 onMomentumScrollEnd 이 각각 손을 뗀 직후, 관성 스크롤이 생긴 뒤 종료된 경우의 이벤트로 사용되어 이에 어려움을 겪고있습니다. 혹시 위 두 이벤트를 이용하여 관성 스크롤이 생기던 생기지 않던 모든 스크롤이 멈춘 뒤 메소드를 실행 시킬 수 있는 방법이 있을까요? 혹은 ScrollView 를 대체하여 변화하는 x 좌표를 이용 할 수 있는 컴포넌트 / 라이브러리 / 키워드를 공유해주신다면 감사히 참고하겠습니다. 감사합니다.

NestedScrollView 의 자식뷰로 RecyclerView 가 존재할 때 RecyclerView.Holder 의 TextView.text 값이 변경되면 자동으로 스크롤됨

제목 그대롭니다. 스택 오버플로에 나온 온갖 해결법을 다 써봐도 지멋대로 움직이는 스크롤이 막히질 않네요. 해결방법 있을까요?

react-native ScrollView in View ?

안녕하세요, 리액트네이티브 공부중에 있습니다 ScrollView 안에 View를 사용할 때 View를 스크롤 하면 이벤트를 호출하고 싶은데 onPress 등등 아무것도 안먹네요 ㅠㅠ Touchable은 작동하긴 한데, 클릭을 하면 실행되는데 스와이프 할때는 실행 안하네요 코드 첨부합니다 하고 싶은 기능: 스크롤 하나씩 할 때마다 인덱스값을 받고 싶어요

무한스크롤 성능 분석 결과가 예상과 다르게 나와요

무한스크롤 성능 분석하려고 기본 scroll Event로 document.width꺼내서 계산해봐서 api call 진행해주는 로직에 throttle 300ms 넣어서 동작하는거랑 비교하는데 왜 throttle 없는게 성능 지표에서 script 소모 시간이 더 작을까요? scroll event가 진행하는 동작이 적어서 throttle 사용하는게 오히려 안좋은 걸까요?

Scrollview 안에 Webview 사용 문제

제목처럼 ScrollView 안에서 Webview를 사용할때 터치하는 영역이 스크롤뷰인지 웹뷰인지에 따라 해당 컴포넌트만 스크롤이 되는데 터치하는 영역 상관없이 둘다 스크롤처리가 동시에 가능하도록 할 수 있을까요??

React Native FlatList 스크롤바만 z-index가 가능할까요??

현재 React Native로 개인 프로젝트 구현중에 특정 영역을 Scroll Y위치에 맞춰서 position absolute를 띄워 z-index를 높여 보여주게 만들었으나 FlatList scrollbar까지 가려서 UX상 좋지 않은 경험을 보여주어 이부분을 수정하기 위해 여러 서치를 하였으나 아직 방법을 찾지 못하였습니다.. 혹시 선배님들께서 관련하여 해결한 사례가 있는지 공유 부탁드립니다!

swiftui 키보드가 화면 가림 오류

키보드가 textfield를 가려버리는데 뭐가 문젠가요 참고로 textfield는 scrollview 내부에 있습니다. axis: .vertical 설정을 추가하니까 이런 오류가 생겼습니다ㅜㅜ

유튜브 기능에서의 리사이클러뷰 활용법이 궁금합니다.

이미지는 유튜브의 채널을 클릭 시 나오는 화면입니다. 밑으로 스크롤 하여, 화면 끝에 다다를 경우 동영상이 추가됩니다. 저는 이 구조가, scrollView 안에 (채널 정보를 나타내는 뷰), (동영상 리스트를 보여주는 리사이클러뷰) 이렇게 두개가 있다고 생각했습니다. 비슷하게 만들어봤고, 작동은 잘 되지만 동영상이 추가됨에 따라 렉이 걸립니다. 검색해보니, 리사이클러뷰가 스크롤뷰 안에 있을 때는 재사용해주는 기능을 잃는다고 나와있습니다. 스크롤뷰를 쓰지 않고 해당 이미지처럼 구현하는 방법이 있는지 궁금합니다.

scrollIntoView를 이용해서 스크롤 하는 법?

scrollIntoView를 이용해서 스크롤을 하는데요, 화면의 상단으로 잘 이동하는데 문제는 맨위의 GNB가 해당 내용을 가려버려요. GNB는 fixed여서 숨기거나 이동을 할수가 없어요 ㅜ 혹시 scrollIntoView로 이동하고 GNB만큼 스크롤을 이동시킨다거나 하는 옵션은 없나요?

잘되던 스크롤이동 기능이 갑자기 먹통이 됬습니다.

다른 브라우저에서 문제 없이 동작하는 scrollTo로 스크롤 이동시킨 기능이 제 컴퓨터 크롬에서만 동작하지 않는데 이게 이유가 뭘까요... 제 컴터 파이어폭스, 네이버웨일, 엣지 브라우저에서는 문제 없이 동작하는데 제 크롬에서만 아예 먹통이네요...? 심지어 다른 분 컴터 크롬에서는 또 잘 동작합니다... 이유가 뭘까요.....? 혹시 제가 발견못한 코드 수정이 있나 해서 한참전 브랜치로 롤백도 해보고 강력새로고침으로 캐시도 초기화 해봤습니다... 그런데도 증상은 같네요..;;;

react infinite scroll 최적화 방법?

리액트 웹 앱에서 인피니트 스크롤을 적용하고 있는데요. 컨텐츠가 적을때는 크게 이슈가 없었는데 많으니까 버벅거리기 시작하더라구요. 코드를 첨부하기가 애매한 상황인데, 제가 적용한 방법을 공유하자면 우선 react-query로 각 페이지 데이터를 캐싱하고 있구요. 인피니트 스크롤 속 아이템들은 key를 id 값으로 지정하고 memo로 감싸놓은 상태입니다. 이렇게 했을때 버벅거림이 어느정도 해소가 되기는 하는데, 여기서 더 최적화 할 수 있는 방법이 있는지 궁금합니다. 혹시 좋은 방법이 있으시면 공유 부탁드립니다. 감사합니다.

(js 초보 질문) scrollEventHandler() 함수 위에 scrollPositionY 변수를 0으로 초기화 시키는 이유가 궁금해요.

안녕하세요 JS 기초 관련 질문 드립니다! 질문) 아래 코드에서 왜 scrollEventHandler() 함수 위에 scrollPositionY 값을 0으로 초기화 시키는지 이유가 궁금합니다.

[SwiftUI]array에 값이 append 되질 않아요

코드 실행은 되는데 만든 plus버튼을 눌러서 AddFile함수를 실행시켜도 folders어레이에 아무 값이 추가 되질 않아요ㅠ AddFile함수를 잘못 작성한 것일까요? 코드는 전체 복붙해놨습니다 import SwiftUI struct Category: View { var body: some View { NavigationView { ScrollView { VStack { HStack { Text("Category") .font(.title) .padding(.horizontal) Spacer() Button { AddFile(title: "hello") } label: { Image(systemName: "plus") .font(.title2) .padding(.horizontal) } } Text("\(folders.count)") if folders.first != nil { ForEach(folders) { folder in ZStack { RoundedRectangle(cornerRadius: 15) .frame(width: 100, height: 100) .foregroundColor(.yellow) Text(folder.title) .font(.title3) .fontWeight(.bold) } } } else { Text("No folder") } } } } } func AddFile(title: String) { folders.append(Folder(title: title)) } } struct Folder: Identifiable { var id = UUID().uuidString var title: String } var folders: [Folder] = [ Folder(title: "hi"), Folder(title: "hello") ] struct Category_Previews: PreviewProvider { static var previews: some View { Category() } }

HTML div contenteditable=true로 에디터 만드는데

div 태그에서 contenteditable=true를 적용하여 에디터를 만드는데 볼드체와 글꼴색상만 필요합니다~ 근데 볼드체 적용하면 글꼴색상(빨간색)은 적용안되고, 글꼴색상(빨간색)을 적용하면 볼드체는 또 적용안되고.. 즉, 빨간색+볼드체가 동시에 적용이 안되는데, 어떻게 코드를 작성해야 좋을까요 ㅠㅠ 고수님들 답변 부탁드립니다! const btnBold = document.getElementById('btn-bold'); btnBold.addEventListener('click', function () { setStyle('bold'); }); function setStyle(style) { document.execCommand(style); focusEditor(); } function focusEditor() { editor.focus({preventScroll: true}); } const selectFontColor = document.getElementById('select-font-color'); selectFontColor.addEventListener('change', function () { setFontColor(this.value); }); function setFontColor(color) { document.execCommand('foreColor', false, color); focusEditor(); }

react native 탭 선택시 해당 스크롤로 이동

해당 탭을 누르면 그 해당 스크롤로 이동할 수 있는 기능을 구현하려고 합니다. ScrollView에 ref를 이용해서 특정한 위치로 이동해보려고도 하고 scrollTo 이벤트도 사용해봤는데 안되네요ㅠㅠ 어떤방법으로 해야될까요?ㅠㅠ

[react-native] MutableRefObject<undefined> is not assignable to type LegacyRef 타입 에러가 발생합니다.

react-native, typescript로 개발하고 있습니다. ref를 선언해서 ScrollView에 전달 하려는데 타입 에러가 발생합니다. 에러 내용 MutableRefObject<undefined>' is not assignable to type 'LegacyRef<ScrollView> | undefined'. 동작은 잘하지만 빨간줄이 생겨서 혹시 이 에러 해결해보신 분 있으실까요?

useEffect에 addEventListener를 사용할때 계속해서 event가 발생하는것이 rendering이 여러번되는 것보다 좋은건가요?

Scroll이 50 위로 올라갔을때 state를 false에서 true로 변경해주는 코드를 만들었습니다. 물론 다시 50 밑으로 내려가면 state를 true에서 false로 변경해줄 것입니다. 해당 방법에서 console을 찍어보면서 느낀 것이 있습니다. 리렌더링은 당연히 state가 변경될때만 진행되었습니다. 하지만, 이벤트리스너는 scroll이라는 이벤트를 계속 만족시켜 실행이 되고 있는 상태입니다. 더이상 좋은 방법이 생각이 나지 않아서 해당 방법으로 진행하려고 합니다. 혹시 event가 여러번 발생하는 것이 rendering이 여러번되는 것보다 좋은 것인가요? 여기서 이벤트리스너를 50을 기준으로 state변경에만 사용하고 다른 경우에 event를 발생하지 않게 하는 좋은 방법이 있을까요?

react-native 안드로이드 이미지 해상도가 깨집니다.

react-native로 앱 개발중인데 안드로이드에서만 이미지가 깨지는 현상이 있습니다. <AutoScrolling duration={AUTO_SCROLL_DURATION}> <Image style={[{ width: 2280, height: 288 }]} source={require(''...")} /> </AutoScrolling> 이미지를 AutoScrolling 컴포넌트를 사용해서 로딩하고 있습니다. IOS 에뮬레이터에서는 이상이 없는데, 안드로이드 에뮬레이터로 확인하면 이미지 해상도가 깨지네요.. AutoScrolling 컴포넌트에서 안드로이드관련 설정을 해야할까요?

[react-native-auto-scrolling] duration 적용이 안됩니다.

https://www.npmjs.com/package/react-native-auto-scrolling 이미지 auto 스크롤을 적용하기 위해 라이브러리를 사용하고 있습니다. 위에 링크로 들어가서 readme 설명대로 이미지 컴포넌트에 duration을 적용했습니다. 그런데 에러만 발생하고 duration이 바뀌지 않네요.. <AutoScrolling style={styles.scrolling1}> <Image style={styles.image} delay={0} duration={6000} source={require("./assets/merry-christmas-png.png")} /> </AutoScrolling> 다른 라이브러리를 써야할까요? 해결책 아시는분 답변 부탁드립니다..!

렌더링 이후 스크롤을 맨 아래로 내리고 싶어요.

안녕하세요 React를 이용해 웹페이지를 만들고 있습니다. 현재 구현하고 싶은 기능은 버튼을 클릭하면 state를 변경하고 state가 true이면 하단에 여러 이미지들이 보이고 스크롤을 아래로 내리는 작업을 동시에 하려고 합니다. onClick 부분에 setIsOpen(true)로 변경하여 보이도록 하고 window.scrollTo({ top: document.body.scrollHeight })를 이용해서 구현했는데 사진은 보이는데 스크롤이 안내려갑니다. 무엇을 수정해야할까요??? 아래는 코드 예시입니다.

React native의 FlatList가 스크롤 되지 않습니다.

React Native에서 아래처럼 ScrollView 안에 여러 FlatList 컴포넌트를 갖는 구조를 만들었는데요 내부의 FlatList 들이 스크롤이 되지 않습니다. 해결방법 아시는 분 계실까요 ㅠㅠ??

내부 컨텐츠에 따라 늘어나는 textarea 문제

안녕하세요. 리액트에서 입력하는 컨텐츠에 따라 크기가 변하는 textarea를 구현하려고 합니다. textarea에 ref를 지정하고 ref의 scrollHeight 속성값을 이용해서 구현했는데 여러 줄을 지웠을 때 textarea가 맞춰서 줄어들지 않는 문제가 있더라고요. 어떻게 수정해야 하는지 알려주실 분 있으실까요?

Throttle vs debounce

onScroll 이벤트 핸들러를 사용하는데요. 호출이벤트가 빠른시간에 여러번 발생해서 문제를 겪고 있습니다. (console.log가 엄청나게 찍히고 있습니다 ㅎㅎ) Throttle이나 debounce의 기능을 사용해서 해결해야한다고 힌트를 얻었는데요. 각각의 특징과 각각 언제 사용되는지에 대한 예시를 설명해 주실 분 계신가요?

react-native를 사용하는데 scrollbar가 이상합니다.

안녕하세요 개인적으로 하는 앱 만들기 프로젝트를 하고 있는데요. react-native의 FlatList를 이용해서 여러가지 정보를 보여주려고 합니다. 그런데 스크롤바가 오른쪽 끝이 아닌 가운데에 나타나고 있어요. 혹시 해결방법이 있을까요?!