CSS에서 위아래 스크롤을 구현하는 방법

상하 스크롤을 구현하는 CSS

웹 디자인 및 개발에서는 텍스트의 상하 스크롤 효과를 구현하는 것이 일반적인 요구 사항입니다. 아래에서는 위아래 스크롤을 구현하는 CSS 기반 방법을 소개합니다.

1단계: 컨테이너 정의

HTML에서는 먼저 스크롤해야 하는 콘텐츠를 포함할 컨테이너를 정의해야 합니다. div를 컨테이너나 기타 HTML 요소로 사용할 수 있습니다.

코드 예:

<div class="scroll-container">
  <p>这是需要滚动的内容……</p>
  <p>这也是需要滚动的内容……</p>
  <p>这还是需要滚动的内容……</p>
</div>

2단계: 스타일 설정

CSS를 사용하여 너비, 높이, 테두리 등을 포함한 컨테이너의 기본 스타일을 설정합니다. 동시에 콘텐츠가 컨테이너 내에서 자유롭게 스크롤될 수 있도록 overflow:hidden 속성을 ​​사용하여 컨테이너 범위를 벗어나는 콘텐츠를 숨겨야 합니다. overflow: hidden属性隐藏超出容器范围的内容，使得内容能够在容器内自由滚动。

代码示例：

.scroll-container {
  width: 400px;
  height: 200px;
  border: 1px solid #ccc;
  overflow: hidden;
}

步骤三：实现滚动效果

在容器内，我们需要定义一个元素作为滚动的“窗口”，用于显示需要滚动的内容。我们可以使用定位方式，将这个滚动窗口放置在容器内部，并设置其初始位置。

为了实现滚动效果，我们需要使用CSS的animation属性，定义一个动画。在动画中，我们可以控制滚动窗口的位置，使其向上或向下移动，同时设置滚动的速度。

代码示例：

.scroll-container {
  position: relative;
}

.scroll-container p {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

在上面的示例中，我们将滚动窗口定义为scroll-container元素内的子元素p，并将其放置在scroll-container容器的左上角。接着，我们使用position: absolute将其与容器脱离文档流，并使用top: 0和left: 0将其放置在容器的最上面。

在animation属性中，我们使用scroll作为动画名称，并设置其持续时间为10秒，时间函数为linear，表示匀速运动。infinite表示动画持续无限次。接下来，我们在@keyframes scroll中定义动画的具体过程，其中transform: translateY(-100%)

코드 예:

<div class="scroll-container">
  <p>这是需要滚动的内容……</p>
  <p>这也是需要滚动的内容……</p>
  <p>这还是需要滚动的内容……</p>
</div>

3단계: 스크롤 효과 구현

컨테이너에서 스크롤해야 하는 콘텐츠를 표시하려면 요소를 스크롤 "창"으로 정의해야 합니다. 위치 지정을 사용하여 이 스크롤 창을 컨테이너 내부에 배치하고 초기 위치를 설정할 수 있습니다.

스크롤 효과를 얻으려면 CSS의 animation 속성을 ​​사용하여 애니메이션을 정의해야 합니다. 애니메이션에서는 스크롤 창의 위치를 ​​제어하고, 위 또는 아래로 이동하고, 스크롤 속도를 설정할 수 있습니다. 🎜🎜코드 예: 🎜rrreee🎜위 예에서는 스크롤 창을 scroll-container 요소 내의 하위 요소 p로 정의하고 안에 배치합니다. >scroll-container 요소. code>scroll-container컨테이너의 왼쪽 상단 모서리입니다. 다음으로 position: Absolute를 사용하여 문서 흐름에서 이를 제거하고 top: 0 및 left: 0을 사용하여 컨테이너 내부에 배치합니다. 의 상단. 🎜🎜animation 속성에서 scroll을 애니메이션 이름으로 사용하고 지속 시간을 10초로 설정하고 시간 함수를 linear로 설정합니다. , 이는 균일한 운동을 의미합니다. 무한은 애니메이션이 무한정 계속됨을 의미합니다. 다음으로, @keyframes 스크롤에서 특정 애니메이션 프로세스를 정의합니다. 여기서 transform:transformY(-100%)는 스크롤 효과를 얻기 위해 스크롤 창의 높이를 위로 이동하는 것을 의미합니다. . 🎜🎜4단계: 전체 코드🎜🎜위 단계는 서로 통합되었으며 최종 전체 코드는 다음과 같습니다. 🎜rrreee🎜위는 CSS를 사용하여 위아래 스크롤을 달성하기 위한 단계와 전체 코드입니다. 컨테이너와 롤링 창의 스타일을 수정하여 충족했습니다. 🎜

위 내용은 CSS에서 위아래 스크롤을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!