전체 페이지를 스크롤하면서 React에서 콘텐츠의 내부 스크롤을 구현하는 방법

전체 페이지가 스크롤되면 하위 콘텐츠를 먼저 스크롤하는 로직을 React에서 만들고 싶습니다. 하위 콘텐츠가 완전히 스크롤되면 다음 섹션으로 이동합니다. 예를 들어 A, B, C라는 세 개의 섹션이 있습니다. 각 섹션의 높이는 100vh입니다. 파트 B에는 B1, B2, B3 및 B4의 네 가지 하위 파트가 포함되어 있으며 모두 높이가 100vh입니다. 페이지를 스크롤할 때 섹션 B로 스크롤하면 해당 하위 섹션도 스크롤을 시작합니다. 하위 섹션이 완전히 스크롤되면 스크롤이 C 섹션으로 이동합니다. GSAP 라이브러리를 사용하여 구현...

P粉823268006 2023-09-06 18:19:42 0  1  540

javascript - CSS 전역 스타일을 동적으로 수정하기 위해 JS를 구현하는 방법

페이지의 CSS 전역 스타일을 동적으로 수정하려는 경우(예: 페이지의 모든 글꼴 색상을 빨간색으로 변경) CSS {code...}를 통해 이를 수행할 수 있습니다. js를 사용하는 경우 버튼을 사용하세요. 페이지에서 모든 요소의 스타일을 수정하려면 즉, js를 클릭하세요. 버튼은 페이지의 모든 요소의 스타일과 글꼴 색상을 빨간색으로 동적으로 변경합니다...

阿神 2017-05-19 10:11:38 0  3  653

요소의 스크롤 위치 백분율을 계산하는 방법은 무엇입니까?

창 내 요소의 스크롤 위치를 백분율로 계산하고 싶습니다. 0%는 요소의 상단이 창 하단에 있는 위치(아직 표시되지 않음) 100%는 요소의 하단이 창 상단에 있는 위치(모든 요소가 표시됨) 거의 비슷하지만 내가 수학에서 뭔가 잘못 생각하고 있다는 걸 알아요. 여러 요소의 스크롤 비율을 표시하기 위해 작은 데모를 만들었지만 비율이 모두 잘못되었습니다. functiongetElemScrollPercent(selector){constscale=0.1;constel=document.quer

P粉786800174 2024-04-03 19:55:00 0  1  638

CSS 행 클래스는 특정 요소를 프레임 밖으로 내보내는 동시에 정적이고 디스플레이 하단에 고정되어야 합니다.

현재 내 페이지는 다음과 같습니다. 두 요소가 서로 옆에 있도록 행 클래스를 추가한 후 하단 탐색 모음이 스크롤해야 하는 위치로 푸시됩니다. 여기에서 행 요소가 없는 다른 페이지를 볼 수 있습니다. 탐색 링크는 디스플레이 하단에 완벽하게 고정되어 있습니다(식물 및 방 탐색 요소는 알림 탭(이미지 1)에 있어서는 안 되므로 이 요소를 무시합니다 이미지 2). 페이지가 스크롤 가능하고 내 탐색바가 올바른 위치에 유지되지만 요소의 윤곽이 올바르지 않습니다. 모든 녹색 상자 디스플레이는 편집 및 삭제 버튼과 함께 서로 포개져 표시되어야 합...

P粉156415696 2024-04-03 18:48:12 0  1  452

제목 변경: 고정 div 열 및 나머지 너비

모든 열이 브라우저 창의 전체 높이가 되는 5열 레이아웃을 만들려고 합니다. 중간 열을 제외한 나머지 열은 브라우저/문서 스크롤 시 고정되어 움직이지 않아야 합니다. 중간 열에는 웹 사이트 콘텐츠가 포함되고 수직으로 오버플로되므로 브라우저에서 정상적으로 스크롤되어야 합니다. 그 외에도 중간 열을 제외한 모든 열의 너비는 고정되어 있으며 나머지 공간(상위 요소의 너비 100%)을 차지하려면 중간 열이 필요합니다. 한 가지 요구 사항은 flexbox 또는 css-grid를 사용하지 않는 것입니다. 아래 코드는 내가 얻은 것입니다. 열 ...

P粉786432579 2023-09-14 17:17:47 0  1  658

javascript - 오른쪽 메뉴가 대상 위치를 올바르게 찾을 수 없습니다. 즉, 하위 메뉴가 사라진 후에도 마우스는 여전히 원래 위치에 있습니다. 자세한 내용은 그림을 참조하세요.

지금 마우스가 있는 곳이 바로 문화센터로 이동하려는데 아래 그림을 보시면 위의 하위메뉴는 철회되어야 하는데 신용관리 메뉴로 슬라이드가 되지 않습니다. . 문화센터로 돌아가려면 지금 클릭만 하면 되는데, 이는 사용자 경험에 영향을 주지만...

曾经蜡笔没有小新 2017-05-19 10:28:27 0  1  398

블렌드 모드가 특정 배경을 무시하도록 만드는 방법은 무엇입니까?

아래 이미지를 살펴보십시오. 블렌드 모드: 차이를 사용하여 하단의 파란색 직사각형이 천천히 위쪽으로 이동하고 있다고 상상해 보세요. 빨간색 줄무늬를 무시하고 통과할 때 파란색을 유지하고 싶지만 녹색 줄무늬에 있을 때는 혼합 혼합 모드를 사용합니다. 어떻게 해야 하나요?

P粉418351692 2023-09-15 10:20:50 0  1  616

요소에 스크롤 이벤트 리스너가 추가되었지만 scrollTop이 0이 아닌 경우에만 올바르게 이동합니다.

그래서 저는 완료/활성 작업이라는 두 개의 목록이 있는 작은 스크립트를 작성했습니다. 버튼을 클릭하면 작업 목록을 전환할 수 있고, "추가 정보"를 클릭하면 작업에 대한 자세한 내용을 읽을 수 있습니다. 더 많은 정보를 클릭하면 새 div 요소가 생성되고 해당 요소의 호스트 요소 Y 위치를 따르고 싶습니다. 절반만 작동합니다. 다음과 같습니다. 여기에 이미지 설명을 입력하세요. 이것은 버그입니다. 스크롤 가능한 요소인 scrollTop이 0이 아닐 때 이 오류가 발생한다고 확신합니다(올바른 방식으로 생성되었으며 스...

P粉427877676 2024-04-01 11:03:26 0  1  620

Android는 앱을 열지 않고도 헤드폰 연결 및 분리를 모니터링합니다.

지금 수요는 그렇습니다. 휴대폰을 켠 후 또는 앱을 열지 않고 헤드폰의 연결 및 분리를 모니터링하세요. 따라서 다른 작업을 수행합니다. 현재 생각은 이렇습니다. 부팅 후 서비스를 시작하고 서비스에서 헤드폰 연결 및 분리 상태를 모니터링합니다. 헤드폰이 연결되어 있으면 활동을 엽니다. 그렇지 않으면 현재 활동을 닫습니다...

漂亮男人 2017-06-24 09:42:57 0  2  1116

HTML 태그에서 노드를 얻는 방법은 무엇입니까?

클릭 이벤트를 사용하는 경우 이벤트를 사용하여 현재 노드를 찾을 수 있습니다. 그러나 이벤트가 바인딩되지 않은 경우 p 태그 {code...}에서 현재 p 노드를 얻는 방법 내 요구 사항은 스크롤 막대를 통해 다른 노드로 스크롤할 때 v-show=true를 사용하는 것입니다. {code... } .} {코드...}

曾经蜡笔没有小新 2017-05-19 10:34:54 0  4  783

android - Fragment가 스택에 push되면 pop 애니메이션이 추가되는데 pop할 때 실행이 안되나요?

어떤 경우에는 popfragment 중에 애니메이션을 수행하고 싶지 않습니다. 이를 달성할 수 있는 방법이 있습니까? 사용 중에는 프래그먼트 a에서 b를 연 다음 c를 열었는데 종료할 때 c에서 b로 간 다음 a로 가야 할 수도 있습니다. 이때 애니메이션이 필요한데 어떤 경우에는...

某草草 2017-05-16 13:27:04 0  1  563

CSS: 텍스트 옆에 아이콘을 어떻게 배치하나요?

두 개의 하위 요소 text(span 요소)(i) 아이콘 - div 요소를 포함하는 이와 같은 상위 div 요소(display:flex)가 있습니다. 텍스트에 줄 바꿈 없이 한 줄만 있으면 모든 것이 잘 작동합니다. 그러나 줄 바꿈(2줄 이상)할 때 가장 넓은 줄을 기준으로 요소의 너비가 조정됩니다. 길이가 길어지면 텍스트를 줄 바꿈하고 싶습니다. 위의 예에서 (i) 아이콘을 NORTH 옆에 두기를 원합니다. (i) 아이콘을 NORTH 옆에 두고 싶습니다.

P粉668146636 2023-08-17 14:39:36 0  1  502

페이지의 HTML 요소를 탐색하려면 Tab 키를 사용하세요.

탭 키를 사용하는 HTML 페이지에서 탭 키를 사용하여 스크롤할 수 없습니다. 다음은 "테이블을 업데이트할 수 없습니다." 팝업이 열릴 때 탭을 찾아보려는 페이지의 사진입니다. 저는 그것을 클릭하고 탭을 눌렀습니다. 탭을 처음 누르면 초점이 그림의 화살표 요소로 이동합니다. 하지만 다음에 탭을 누르면 Page3 요소로 이동합니다. 위쪽 화살표 아이콘은 HTML에서 선택된 <i 태그이고 다음 <i 태그는 x 버튼입니다. 어떤 이유로 두 번째 <i 태그를 건너뛰고 탭 키가 두 번째로 나타날 때 x 버튼...

P粉106301763 2024-02-03 21:30:59 0  1  473

마우스를 올리면 애니메이션이 일시 중지되지만 마우스가 떠나면 계속되는 방법

나는 여러 가지 솔루션에 지쳤으며 이것이 내가 얻은 가장 가까운 솔루션입니다. 하지만 그 결과는 여전히 만족스럽지 않습니다. 마우스가 요소를 벗어나면 요소가 원래 회전으로 되돌아가기 때문입니다. 아이디어는 요소 위로 이동하면 마우스가 요소를 벗어나더라도 애니메이션을 트리거한다는 것입니다. 요소 위로 마우스를 가져가면 애니메이션이 재생되어 0도에 유지되고, 마우스가 떠나면 다른 애니메이션이 재생되어 다시 -8도로 회전합니다. consstelements=document.getElementsByClassName('로타

P粉786800174 2024-04-01 09:43:54 0  1  488

javascript - 이미지 표시 스크롤 문제

사진, 스크린샷의 일부 등 이러한 사진은 25개의 사진이 있는 경우 모두 하나의 ul에 포함됩니다. 초기 화면에는 10개의 사진이 표시됩니다. 더보기 버튼을 클릭하면 10개의 사진이 모두 위로 스크롤되어 숨겨집니다. 아래에서 아래로 스크롤하면 10장의 사진이 있습니다. 한 번에 10장의 사진만 표시할 수 있습니다. 다시 클릭하면 표시됩니다...

習慣沉默 2017-05-19 10:27:01 0  4  969

mongodb에서는 mapReduce의 일부 값이 Reduce로 처리되지 않습니다.

mongodb에서 mapReduce를 사용할 때 일부 값이 Reduce에서 처리되지 않아 매우 혼란스럽습니다. 먼저 코드 {code...}로 이동합니다. 출력해야 할 데이터는 {code...}입니다. 조건의 키가 방출되면 매우 혼란스럽습니다. 4보다 작으면 ...보다 크면 정상적으로 표시됩니다.

大家讲道理 2017-05-17 10:04:04 0  1  649

Chrome에서 스크롤 기능에 문제가 있는 경우가 있습니다.

내 사이트에서 스크롤 문제가 발생했는데 그 이유를 모르겠습니다. Chrome에서만 스크롤이 작동하지 않는 경우가 있습니다. 내가 작성한 모든 코드를 비활성화하려고 시도했지만 문제가 지속됩니다. 사파리에서는 스크롤이 잘 됩니다. https://mirkomina.com/ 문제를 유발하는 구체적인 내용은 없는 것 같습니다. 즉, 커서를 놓으면 문제가 발생하는 특정 위치를 찾을 수 없다는 의미입니다. 내가 작성한 모든 코드를 제거하고 스크립트를 비활성화해 보았습니다.

P粉817354783 2024-03-29 00:21:20 0  1  450

제목이 다음과 같이 변경됨: CSS3의 100vh 값은 모바일 브라우저에서 고정되지 않습니다.

매우 이상한 문제가 있습니다... 제가 접한 모든 브라우저와 모바일 버전에는 다음과 같은 동작이 있습니다. 페이지를 로드할 때 모든 브라우저에는 상단 메뉴(예: 주소 표시줄 표시)가 있습니다. 페이지 스크롤을 시작하면 그것은 위로 미끄러진다. 때로는 100vh가 뷰포트의 보이는 부분에서만 계산되므로 브라우저 표시줄이 위로 슬라이드되면 100vh가 증가하고(픽셀 단위) 사용자 경험을 위해 모든 레이아웃이 다시 그려지고 크기가 조정됩니다. 효과가 좋지 않으면 이런 문제가 발생하나요? 처음 뷰포트 높이에 대해 들었을 때 너무 기뻤습니다.

P粉682987577 2023-08-21 16:49:22 0  2  515

JS는 2개의 DOM의 onclick 이벤트를 교환할 수 있나요?

내 웹사이트 대신에 브라우저를 만들었습니다. 일부 작업을 연결해야 합니다. JS에 익숙하지 않습니다. 두 요소의 클릭 이벤트를 교환할 수 있나요? Baidu는 모든 함수 이름이 알려진 경우 바인딩합니다. 알 수 없는 경우 요소의 클릭 이벤트 함수 이름을 가져오는 방법은 무엇입니까?

曾经蜡笔没有小新 2017-06-10 09:47:39 0  2  573

REACT - 브라우저 후 버튼에서 페이지가 다시 렌더링되는 것을 방지합니다.

많은 제품을 보여주는 카탈로그 페이지가 있습니다. 사용자가 하단에서 선택할 수 있는 제품 중 하나(예: 제품 번호 1000)를 클릭하면 다른 페이지로 이동하여 내용 등을 확인합니다. 뒤로 사용 버튼 브라우저가 카탈로그 페이지로 돌아가면 모든 것이 다시 렌더링됩니다. 이는 의미가 있지만 이전에 선택한 제품에 스크롤 막대를 배치하는 데 많은 시간이 걸립니다. 사용자가 페이지 상단에서 특정 제품(예: 제품 번호 4)을 선택하면 모든 것이 잘 작동하지만, 하단으로 이동하면 시나리오가 시작됩니다. REACT에서 이 디렉토리 페이지를 캐시할 ...

P粉733166744 2024-03-27 14:50:53 0  1  473