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>

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