스크롤 천천히 되는 js 사용했더니 이미지 안보임 오류
본문
아임웹에서 js 첨부해서 스크롤 천천히 내려가는건 시행이 되는데
갑자기 잘 보이던 이미지가 안보여 확인해보니
- visibility: hidden;
- image-rendering: -webkit-optimize-contrast;
이렇게 되며 안보이고 있는것같아요.... 강제로 덮어 써야 하는건지
스크롤 js는 아래 적었습니당 수정해서 제대로 보이도록 할수 있을까요
<head>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
</head>
<script>
$(document).ready(function () {
$("html").smoothWheel()
});
class Scrooth {
constructor({element = window, strength=10, acceleration = 1.2,deceleration = 0.975}={}) {
this.element = element;
this.distance = strength;
this.acceleration = acceleration;
this.deceleration = deceleration;
this.running = false;
this.element.addEventListener('wheel', this.scrollHandler.bind(this), {passive: false});
this.element.addEventListener('mousewheel', this.scrollHandler.bind(this), {passive: false});
this.scroll = this.scroll.bind(this);
}
scrollHandler(e) {
e.preventDefault();
if (!this.running) {
this.top = this.element.pageYOffset || this.element.scrollTop || 0;
this.running = true;
this.currentDistance = e.deltaY > 0 ? 0.1 : -0.1;
this.isDistanceAsc = true;
this.scroll();
} else {
this.isDistanceAsc = false;
this.currentDistance = e.deltaY > 0 ? this.distance : -this.distance;
}
}
scroll() {
if (this.running) {
this.currentDistance *= this.isDistanceAsc === true ? this.acceleration : this.deceleration;
Math.abs(this.currentDistance) < 0.1 && this.isDistanceAsc === false ? this.running = false : 1;
Math.abs(this.currentDistance) >= Math.abs(this.distance) ? this.isDistanceAsc = false : 1;
this.top += this.currentDistance;
this.element.scrollTo(0, this.top);
requestAnimationFrame(this.scroll);
}
}
}
const scroll = new Scrooth({
element: window,
strength: 27, //스크롤 한번에 이동하는 거리
acceleration: 1.75,
deceleration: .875,
});
</script>