CSS에서는 .overflow-width 에만 position: relative 를 적용해 주었습니다. 그리고 자바스크립트에서는 다음과 같은 코드를 적용했어요.
document.querySelector('.overflow-width').style.left=`0`;
// 이게 없으면 후에 style.left 를 불러오지 못합니다.
document.querySelector('#content-scroll').addEventListener('wheel',function(e){
if(e.deltaY > 0){
// 스크롤을 내리고 있으면,
if (parseInt(document.querySelector('.overflow-width').style.left) > -100) {
// 가로스크롤이 충분히 진행되지 않았으면(=스크롤이 필요하면)
e.preventDefault();
e.stopPropagation();
// 기존 세로 스크롤을 막습니다.
document.querySelector('.overflow-width').style.top=`0%`;
document.querySelector('.overflow-width').style.left = `${parseInt(document.querySelector('.overflow-width').style.left) - 1}%`;
// 그리고 스크롤 양에 따라 요소의 위치를 옮겨줍니다.
}
} else if (e.deltaY < 0) {
// 스크롤을 올리고 있으면,
if (parseInt(document.querySelector('.overflow-width').style.left) < 0) {
// 가로스크롤이 충분히 돌아오지 않았으면(=스크롤이 필요하면)
// 아래 내용은 동일합니다.
e.preventDefault();
e.stopPropagation();
document.querySelector('.overflow-width').style.top=`0%`;
document.querySelector('.overflow-width').style.left = `${parseInt(document.querySelector('.overflow-width').style.left) + 1}%`;
}
}
});
남의코드 복붙해야지 히히 하고 들어갔다가 저한테 맞는 방법, 제가 당장 필요한 방법은 따로 있다는 사실을 깨달았습니다.
모르는 내용은 아니지만, 매번 코드를 작성할 때 잊게 되는 것 같아 정리 겸 확실히 하기 위해 적습니다.
false: Boolean
0: 정수 0
-0: 정수 -0
0n: BigInt
"": 빈 문자열
null
undefined
NaN
0n: BigInt
정수 리터럴의 뒤에 n을 붙이거나(10n) 함수 BigInt()를 호출해 BigInt를 생성할 수 있습니다. 일반적으로 Int 에서 가장 큰 정수는 9007199254740991 이지만, 그 뒤에 n을 붙이거나 BigInt() 로 감싸면 그 이상의 숫자 9007199254740992n 도 담을 수 있습니다.
undefined에 대한 판정
예를 들어, 어떤 변수에 값이 정의되어 있는지 아닌지에 따라 if 문을 써야 한다면, 절대로
if ( 변수이름 ) {
} else {
}
이렇게 판정하면 안 되고, === 라든가 !== 라든가 typeof 같은 걸 사용하는 것이 맞습니다.
