본문 바로가기
728x90
300x250

스크롤2

상하 스크롤 하단 뿌옇게 처리하기 하단이 뿌옇게 처리된 상하 스크롤 리스트 아이템 1 리스트 아이템 2 리스트 아이템 3 리스트 아이템 4 리스트 아이템 5 리스트 아이템 6 리스트 아이템 7 #scrollable-list::after 가상 요소를 사용해서 하단 뿌옇게 처리된 배경을 만들었다. 그런데 여기서 문제는 맨마지막 리스트가 가상 요소 영역에 가려서 클릭이 안된다는 것이다. 리스트 아이템 1 리스트 아이템 2 리스트 아이템 3 리스트 아이템 4 리스트 아이템 5 리스트 아이템 6 리스트 아이템 7 pointer-events: none; 해당 요소에 마우스 이벤트를 비활성화하는 스타일을 가상요소에 적용하면 해당 가상 요소 위에서 마우스 이벤트가 발생하지 않아 마우스 클릭 등의 이벤트가 아래의 실제 리스트 아이템에 전달될 수 있게 된.. 2024. 1. 2.
부드러운 페이지 스크롤 적용하기 smooth scroll :: 제이쿼리 부드럽게 내려가는 스크롤 스크립트 구하는 것은 어렵지 않다. 검색창에 smooth scroll이라고만 쳐도 많은 정보를 얻을 수 있다. https://idiotwu.github.io/smooth-scrollbar/ https://github.com/kswedberg/jquery-smooth-scroll 나는 그 중에서 github에서 다운 받은 부드러운 스크롤을 적용해봤다.위 주소에서 받을 수 있다. 압축된 파일을 풀어보면 demo폴더가 있다.거기서 index를 열어보면 위와 같은 화면이 p1버튼을 눌러 부드럽게 내려가는 것을 확인 할 수 있다.그래서 이 파일과 연결된 파일 12345678910111213141516 $(document).ready(function() { $('body').smoothSc.. 2018. 12. 6.
728x90
반응형