HTML의 Overflow-x:hidden이 맨 위로 돌아가기 버튼의 스크립트에 영향을 미치는 이유는 무엇입니까?
<p>맨 위로 돌아가기 버튼 스크립트의 <em>상단에서 사라지는 부분</em>은 <code>html {overflow-x:hidden;으로 인해 작동하지 않습니다. </p>
<pre class="brush:php;toolbar:false;"><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- jQuery 포함 -->
<button onclick="topFunction()" class="buton" id="myBtn" title="맨 위로 돌아가기"><i class="fa-solid fa-angle-up"></i> ;
<스크립트>
let mybutton = document.getElementById("myBtn");
window.onscroll = function() {scrollFunction()};
함수 스크롤Function() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "차단";
} 또 다른 {
mybutton.style.display = "없음";
}
}
함수 topFunction() {
document.body.scrollTop = 0; // 사파리용
document.documentElement.scrollTop = 0; // Chrome, Firefox, IE 및 Opera에 적용됩니다.
}
</스크립트>
</버튼>
CSS
HTML,
몸 {
높이: 100%;
스크롤 동작: 부드러움;
위치: 상대;
오버플로-x: 숨김;
}
몸 {
배경색:#060606;
글꼴 계열: '몬세라트', 산세리프;
색상: #ffffff;
여백: 0;
패딩: 0;
}
.Buton {
오버플로-x: 표시됨!중요함;
}
#myBtn {
디스플레이: 없음;
위치: 고정;
하단: 20px;
오른쪽: 30px;
Z-색인: 99;
테두리: 없음;
개요: 없음;
배경색: 빨간색;
색상: 흰색;
커서: 포인터;
패딩: 15px;
테두리 반경: 10px;
글꼴 크기: 18px;
}
#myBtn:호버 {
배경색: #333;
}</pre>
<p>대부분이 코드입니다. 세부정보를 더 추가하세요. 대부분이 코드입니다. 세부정보를 더 추가하세요. 대부분이 코드입니다. 세부정보를 더 추가하세요. 대부분이 코드입니다. 세부정보를 더 추가하세요. 대부분이 코드입니다. 코드입니다, 세부 사항을 더 추가하세요, 대부분 코드입니다, 세부 사항을 더 추가하세요, 대부분 코드입니다, 세부 사항을 더 추가하세요, 대부분 코드입니다, 세부 사항을 더 추가하세요, 대부분 코드입니다, 세부 사항을 더 추가하세요 자세한 내용</p>
<p>html에서 Overflow-x를 제거하면 상단의 버튼이 사라지지만 전체 사이트 콘텐츠 오른쪽에 공백이 생깁니다</p>
