Ted's Codding study

스크롤바 숨기기 본문

CSS

스크롤바 숨기기

Ted93 2024. 4. 25. 21:10

😁 스크롤바가 없는 것이 디자인에 깔끔해 보여서 간략하게 정리 해보았습니다

 

브라우저마다 방법이 조금씩 상이함
배경에 이미지를 넣고 브라우저 크기를 전체로 키우고
스크롤바는 없지만 실제로 스크롤이 구현되는 모습

/* Chrome, Safari, Opera */

body::-webkit-scrollbar {
    display: none;
}

chrome-scrollbar

/* IE, Edge */

html {
	-ms-overflow-style: none;
}

edge-scrollbar

/* Firefox */

html {
	scrollbar-width: none;
}

firefox-scrollbar

  • 홈페이지 사진들은 픽사베이의 사진들을 사용하였습니다.
  • 전체 소스 코드
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>index.html</title>
  <style>
    body {
      margin: 0;
    }
    /* Chrome, Safari, Opera */
    body::-webkit-scrollbar {
      display: none;
    }
    html {
      /* IE, Edge */
      -ms-overflow-style: none;
      /* Firefox */
      scrollbar-width: none;
    }
    img {
      width: 100%;
    }
  </style>
</head>
<body>
  <h1>테드코딩</h1>
  <img src="https://cdn.pixabay.com/photo/2019/07/23/13/51/shepherd-dog-4357790_640.jpg" alt="dog1">
  <img src="https://cdn.pixabay.com/photo/2020/06/30/22/34/dog-5357794_640.jpg" alt="dog2">
  <img src="https://cdn.pixabay.com/photo/2022/06/02/00/04/dog-7236774_640.jpg" alt="dog3">
  <img src="https://cdn.pixabay.com/photo/2023/01/04/13/21/animals-7696695_640.jpg" alt="dog4">
  <img src="https://cdn.pixabay.com/photo/2018/04/23/14/38/dog-3344414_640.jpg" alt="dog5">
  <img src="https://cdn.pixabay.com/photo/2016/07/15/15/55/dachshund-1519374_640.jpg" alt="dog6">
  <img src="https://cdn.pixabay.com/photo/2019/08/25/13/34/dogs-4429513_640.jpg" alt="dog7">
  <img src="https://cdn.pixabay.com/photo/2020/07/20/06/42/english-bulldog-5422018_640.jpg" alt="dog8">
  <img src="https://cdn.pixabay.com/photo/2015/11/17/13/13/puppy-1047521_640.jpg" alt="dog9">
  <img src="https://cdn.pixabay.com/photo/2020/12/01/10/04/dog-5793625_640.jpg" alt="dog10">
</body>
</html>

 

노션으로 보고 싶다면?

https://short-echidna-b16.notion.site/525a9368eb9043378efb79e32bfc983f?pvs=4

 

스크롤바 숨기기 | Notion

스크롤바가 없는 것이 디자인에 깔끔해 보여서 간략하게 정리 해보았습니다

short-echidna-b16.notion.site

 

저작자표시 비영리 변경금지
'CSS' Related Articles more