순수 JavaScript를 사용한 멀티 이미지 무한 스크롤 및 상하 스크롤 효과 구현
많은 웹사이트에서 멀티 이미지 무한 스크롤 효과를 볼 수 있습니다. 이번에는 순수 JavaScript를 사용하여 여러 이미지를 무한으로 스크롤하는 방법과 마우스 오버 시 멈춤 기능을 구현해 보겠습니다.
1. 효과 미리보기:
2. 코드 구현:
<!DOCTYPE html>
<html>
<head>
<title>무한 스크롤</title>
<style>
* { marg ...
9월 17일 03:33에 게시됨
MUI 프레임워크를 활용한 무한 스크롤 페이징 구현
MUI의 pullRefresh 컴포넌트를 활용하면 모바일 웹 앱에서 상단 당기기 새로고침과 하단 끝까지 스크롤 시 추가 데이터를 로드하는 무한 스크롤 기능을 구현할 수 있다. 이 글에서는 하단 스크롤 시 서버에서 페이지 단위로 데이터를 가져와 화면에 렌더링하는 방법을 다룬다.
1. 필수 리소스 로드
MUI의 CSS와 JavaScript 파일, 그리고 데이터 조작을 위한 jQuery를 문 ...
9월 8일 09:58에 게시됨
Vue 3 가상 스크롤을 활용한 대용량 리스트 최적화 구현
1. 고정 높이 가상 리스트 컴포넌트
대용량 데이터를 효율적으로 렌더링하기 위한 Vue 3 가상 스크롤 컴포넌트를 구현합니다. 화면에 보이는 항목만 렌더링하여 성능을 최적화합니다.
<template>
<div
ref="wrapperRef"
class="virtual-scroll-container"
@scroll="onScrollHandler"
>
<div
class="virtual-scroll-spacer"
...
6월 29일 16:29에 게시됨