CSS 요소 가장자리가 스크롤 상자 가장자리 "바깥쪽"에 있다는 것은 무엇을 의미합니까?

다음 사양을 해석하는 올바른 방법은 무엇입니까? "요소 가장자리 A와 요소 가장자리 B가 모두 스크롤 상자 가장자리 A와 스크롤 상자 가장자리 B 외부에 있는 경우 아무 작업도 수행하지 마세요. 출처: https://drafts.csswg.org/cssom-view/#dom -scrollologicalposition-nearest: ~:text=If%20element%20edge%20A%20and%20element%20edge%20B%20are%20b

P粉763748806 2024-01-16 23:45:09 0  1  534

페이지 위에 있는 요소의 오버플로로 스크롤할 수 없습니다.

페이지 크기를 조정하면 요소가 뷰포트 위로 오버플로되어 위로 스크롤하여 볼 수 없습니다. 해결책이 있는 질문을 찾았지만 작동하지 않았습니다. 두 개의 "핵심" 보이지 않는 div와 모든 콘텐츠를 포함하는 하나의 div 요소가 있습니다. 이 문제를 해결하려고 하기 때문에 "컨테이너" div가 존재합니다. .container{위치:고정;상단:0;왼쪽:0;너비:100%;높이:100%;z-index:500;}.main-co

P粉041881924 2023-08-30 21:41:10 0  2  615

javascript - 스크롤 이벤트가 버블링을 방지할 수 없는 이유는 무엇입니까?

요구 사항은 마우스가 페이지의 스크롤 막대가 있는 요소 내부에 있을 때 스크롤 이벤트가 트리거되어 본문 스크롤이 동시에 트리거되는 것을 방지한다는 것입니다. 직설적으로 말하자면, div 내부에서 마우스를 굴릴 때 div가 끝까지 스크롤되더라도 본문은 스크롤되지 않습니다. 버블링을 방지하기 위해 div에 스크롤 이벤트를 제공했습니다. 이 아이디어를 활용하고 싶습니다...

PHP中文网 2017-07-05 11:07:59 0  6  4263

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

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

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

javascript - 요소가 화면의 표시 영역 아래쪽으로 스크롤되었는지 확인하는 방법은 무엇입니까?

요소는 원래 화면의 보이는 영역 하단 위에 있었는데, 스크롤 막대를 위로 스크롤하면 요소가 화면 하단에 닿을 때 기능을 실행하고 싶습니다. 그럼 화면에 닿는 요소를 어떻게 캡쳐할 수 있을까요? 하단의 상황은 어떨까요?

给我你的怀抱 2017-05-19 10:26:18 0  3  766

javascript - 페이지 스크롤바가 나타날 때 페이지가 점프하는 것을 방지하는 방법

페이지 스크롤 막대가 나타날 때 페이지가 이동하는 것을 방지하는 방법 전제 조건: 1. ie8+2와 호환되어야 하며 페이지 높이는 콘텐츠에 따라 다릅니다(즉, 고정 높이인지 여부) 문제: 기본값 최신 브라우저의 스크롤 막대는 Overflow:auto 유형이지만 이제 오른쪽에 요소를 정의해야 합니다(.tips{ {code...} }...

迷茫 2017-06-26 10:54:16 0  1  923

Vue 3에서 지정된 요소의 변수로 스크롤을 구현하는 방법은 무엇입니까?

요소로 스크롤하기 위해 순수 JavaScript에 다음 함수가 있습니다. 이 코드를 Vue3으로 변환하고 싶습니다. varsource=''functionshowScrollInto(currentLocation,toLocation){source=currentLocation//부분을 숨긴 후 반환된 위치 document.getElementById(toLocation).style.display='block'do

P粉060528326 2023-08-28 20:17:07 0  1  619

scrollIntoView()가 컨테이너를 페이지 상단으로 스크롤하는 것을 방지합니다.

스크롤 스냅을 사용하지만 현재 표시된 슬라이드를 제어하기 위한 탐색 버튼도 포함하는 간단한 "주로 CSS" 이미지 캐러셀을 만들려고 합니다. 내가 찾은 유일한 해결책은 내가 원하는 작업을 수행하는 대상 요소에 scrollIntoView()를 사용하는 것입니다. 그러나 이 방법은 항상 대상 요소를 페이지 상단으로 스크롤합니다. 대상 캐러셀 슬라이드와 컨테이너를 원래 위치에 유지하고 슬라이드가 가로로 스크롤되어 표시되기를 원합니다. 저는 AdamArgyle의 예를 보고 있었는데 그는 이것을 했고 컨테이너는 그 자리에 ...

P粉690200856 2024-03-26 20:25:28 0  1  489

CSS 배경 그라데이션이 전체 페이지(스크롤 가능한 콘텐츠 포함)를 덮지 않습니다.

HTML 문서의 CSS 배경 그라데이션에 문제가 있습니다. 선형 그래디언트를 배경으로 사용하고 본문 요소에 설정하는 페이지를 디자인했습니다. 내가 직면한 문제는 스크롤할 콘텐츠가 더 많음에도 불구하고 화면이 처음 끝나는 곳에서 그라데이션이 끝나는 것처럼 보인다는 것입니다. 따라서 아래로 스크롤하면 그라디언트의 두 번째 인스턴스가 처음부터 다시 시작되는 것처럼 보입니다. 이것은 나의 현재 CSS(SCSS) 코드입니다: @importurl('https://fonts.googleapis.com/css2?family=Poppins:wg

P粉506963842 2023-09-12 13:20:09 0  2  705

getElementById를 사용하는 IntersectionObserver의 루트는 항상 null입니다.

Angular 프로젝트에서 IntersectionObserver의 뷰포트를 DOM의 특정 부분으로 제한하고 싶습니다. ID를 사용하여 루트로 사용할 요소를 정의합니다: <divid="container"><divclass="page-list"><infinite-scroll-page(scrolled)="onInfiniteScroll()

P粉501683874 2024-03-29 00:07:25 0  1  411

javascript - 캔버스를 사용하여 전자 서명을 구현하고 캔버스에 마우스 좌표를 배치합니다.

캔버스를 이용하여 전자서명을 구현하려고 할 때, 캔버스 내 마우스 좌표를 정확하게 얻을 수 없습니다. {Code...} ev.clientY를 사용하여 마우스 좌표를 가져오고, canvas.offsetTop은 상위 요소에서 높이를 가져옵니다. 그리고 캔버스는 스크롤 막대가 있는 형태이므로...

巴扎黑 2017-05-16 13:36:00 0  1  611

페이지 제목과 페이지 앵커가 겹치는 문제 해결

HTML 페이지에 정의된 높이로 상단에 고정된 스크롤되지 않는 헤더가 있는 경우: URL 앵커(#fragment 부분)를 사용하여 브라우저가 페이지의 특정 위치로 스크롤되도록 하는 방법이 있습니까? JavaScript의 도움 없이도 고정 요소 높이를 존중합니까? http://example.com/#bar 오류(그러나 일반적인 동작): 올바른: +------------------ -- ---++---------------

P粉521748211 2023-08-21 19:18:36 0  2  574

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

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

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

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

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

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

HTML 요소의 계단식 효과를 얻는 방법은 무엇입니까?

이 요소에 대한 사용자 정의 툴팁을 만들고 싶지만 툴팁을 표시할 공간이 충분하지 않은 상자에 포함되어 있어 잘립니다. (오버플로가 자동으로 설정되어 있기 때문에 실제로 스크롤하여 표시할 수 있지만 스크롤하지 않고도 볼 수 있기를 원합니다.) 범위를 넘어 표시되도록 하는 방법이 있나요? z-index를 사용해 보았으나 소용이 없었습니다. 이것이 내가 부르는 것입니다: .box{width:100px;height:100px;overflow:auto;bor

P粉486138196 2023-08-28 16:39:50 0  2  580

위로 스크롤 버튼을 누르면 페이지 하단에 추가 공백이 생성됩니다.

CSS 기반 부동 스크롤 상단 버튼을 만들기 위해 몇 가지 튜토리얼을 따랐습니다. 그러나 마지막 HTML 요소(예: 마지막 줄) 아래에 추가 공백이 있는 것을 발견했습니다. 추가 공백의 높이는 내 버튼 높이(50px)와 일치합니다. arrowUpdiv 태그를 둘러싸기 위해 별도의 div 태그를 추가해 보았지만 간격은 줄어들었지만 여전히 작지만 눈에 띄는 빈 공간이 있습니다. 여분의 공백을 피할 수 있는 방법이 있는지 궁금합니다. #arrowUp{위치:고정;너비:

P粉226642568 2023-08-13 19:52:48 0  1  557

Vite React 프로젝트를 저장할 때마다 기존 캔버스 요소를 바꾸는 대신 새 캔버스 요소가 페이지 본문에 추가되는 이유는 무엇입니까?

저는 ThreeJ를 배우기 시작하려고 합니다(저는 Javascript 웹 개발도 처음입니다). 몇 가지 튜토리얼을 본 후 Vite 및 React로 시작한 다음 기본 회전 큐브로 시작했습니다. 이 부분은 작동합니다. 하지만 vite에 대해 읽은 내용에 따르면 작업 중인 파일을 저장하면 페이지에 다시 로드하기에 충분할 것입니다. 그러나 실제로는 그렇지 않습니다. 페이지 콘텐츠를 확인한 후 파일을 저장할 때마다 동일한 캔버스 요소가 페이지 본문에 2배 추가됩니다(기존 요소를 바꾸는 대신). 즉, 페이지 내용을 보려면 페이지 아래쪽으로 스...

P粉186904731 2024-03-30 09:57:49 0  1  532

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

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

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