>  기사  >  웹 프론트엔드  >  무한 루프 원활한 스크롤을 달성하기 위한 CSS3에 대한 자세한 설명

무한 루프 원활한 스크롤을 달성하기 위한 CSS3에 대한 자세한 설명

小云云
小云云원래의
2017-12-19 10:06:206241검색

페이지의 특정 모듈에서 일부 메시지를 무한 루프로 스크롤해야 하는 경우가 있습니다. 그렇다면 js를 사용하여 원활한 스크롤을 달성한다면(예를 들어 모듈이 위쪽으로 스크롤되는 경우) 아이디어는 무엇일까요? 이 기사는 주로 CSS3를 사용하여 무한 루프 원활한 스크롤을 구현하는 예제 코드를 소개합니다. 관심 있는 친구들이 이를 참조하여 모든 사람에게 도움이 되기를 바랍니다.

  1. A를 복제하고 원본 데이터 A 뒤에 동일한 데이터 B 복사본을 배치합니다.

  2. setInterval을 사용하여 A의 상위 컨테이너를 위로 스크롤합니다.

  3. 위로 스크롤하는 거리 L이 정확하게 A (L==A.height()), L=0, 스크롤 다시 시작, 무한 루프.

A가 위쪽으로 움직일 때 뒤쪽에 데이터가 있어 유출된 공백을 메울 수 있도록 데이터 복사본을 복제하여 뒤쪽에 배치합니다. B가 가시 영역의 맨 위로 이동하고 A가 가시 영역 밖으로 이동하면 컨테이너는 0으로 재설정됩니다. 사용자는 이를 인식하지 못하고 여전히 B의 첫 번째 데이터라고 생각합니다. 그런 다음 계속 위로 스크롤하세요.

1. CSS3을 사용하여 구현

CSS3 속성을 사용하여 구현하려면 애니메이션이어야 합니다. 전환은 수동으로 실행해야 하고 무한히 실행할 수 없으며 애니메이션이 이 문제를 해결할 수 있기 때문입니다. .

데이터가 하드 코딩된 경우 데이터 복사본을 수동으로 복사하여 뒤에 넣은 다음 원본 데이터의 높이를 CSS에 쓸 수 있습니다. 구현 아이디어는 위와 동일합니다.

css:


@keyframes rowup {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, -307px, 0);
        transform: translate3d(0, -307px, 0);
    }
}
.list{
    width: 300px;
    border: 1px solid #999;
    margin: 20px auto;
    position: relative;
    height: 200px;
    overflow: hidden;
}

.list .rowup{
    -webkit-animation: 10s rowup linear infinite normal;
    animation: 10s rowup linear infinite normal;
    position: relative;
}

html:


<p class="list">
    <p class="cc rowup">
        <p class="item">1- 121233fffffr国家认可更健康进口价格困扰</p>
        <p class="item">2- 3123233</p>
        <p class="item">3- 个人口结构俄跨入国际科技馆客人感觉</p>
        <p class="item">4- ggrgerg</p>
        <p class="item">5- fvdgdv</p>
        <p class="item">6- 德国南部巴士与卡车相撞起火 31人受伤11人死亡朴槿惠庭审时突然昏迷 支持者:她死了法官要负责!</p>
        <p class="item">7- 外交部再次回应印军越界:要求立即将越界部队撤回</p>
  <p class="item">8- 德国网红致信默克尔</p>
     <p class="item">9- 国资委原</p>
        <p class="item">1- 121233fffffr国家认可更健康进口价格困扰</p>
        <p class="item">2- 3123233</p>
        <p class="item">3- 个人口结构俄跨入国际科技馆客人感觉</p>
        <p class="item">4- ggrgerg</p>
        <p class="item">5- fvdgdv</p>
        <p class="item">6- 德国南部巴士与卡车相撞起火 31人受伤11人死亡朴槿惠庭审时突然昏迷 支持者:她死了法官要负责!</p>
        <p class="item">7- 外交部再次回应印军越界:要求立即将越界部队撤回</p>
        <p class="item">8- 德国网红致信默克尔</p>
     <p class="item">9- 国资委原</p>
    </p>
</p>

실행 효과는 다음과 같습니다.

2. 데이터가 불확실할 때

위 섹션에서는 데이터가 죽고 높이가 증가합니다. 하드 코딩된 CSS3입니다. 하지만 인터페이스에서 얻은 데이터의 개수가 불확실하고, 각 데이터의 길이도 불확실하다면 어떻게 해야 할까요?

여기서는 데이터를 기반으로 높이를 다시 계산하여 CSS에 써야 합니다. 그러나 키프레임을 수정하는 것이 더 번거롭기 때문에 덮어쓰기를 사용하여 키프레임의 데이터를 다시 계산합니다.


// 设置keyframes属性
function addKeyFrames(y){
    var style = document.createElement(&#39;style&#39;);
    style.type = &#39;text/css&#39;;
    var keyFrames = &#39;\
    @-webkit-keyframes rowup {\
        0% {\
            -webkit-transform: translate3d(0, 0, 0);\
            transform: translate3d(0, 0, 0);\
        }\
        100% {\
            -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
            transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
        }\
    }\
    @keyframes rowup {\
        0% {\
            -webkit-transform: translate3d(0, 0, 0);\
            transform: translate3d(0, 0, 0);\
        }\
        100% {\
            -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
            transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
        }\
    }&#39;;
    style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, y);
    document.getElementsByTagName(&#39;head&#39;)[0].appendChild(style);
}

원본 데이터 계산 A의 높이를 설정한 후 addKeyFrames 메소드를 실행하고 헤드에 CSS 속성을 추가합니다. 그러면 여기의 행은 이전 설정을 덮어씁니다. 각 스크롤의 거리는 데이터 A의 높이입니다.


function init(){
    var data = &#39;塞下秋来风景异,衡阳雁去无留意。四面边声连角起,千嶂里,长烟落日孤城闭。浊酒一杯家万里,燕然未勒归无计。羌管悠悠霜满地,人不寐,将军白发征夫泪。&#39;, //样例数据
        data_len = data.length,
        len = parseInt(Math.random()*6)+6, // 数据的长度
        html = &#39;<p class="ss">&#39;;
    
    for(var i=0; i<len; i++){
        var start = parseInt( Math.random()*(data_len-20) ),
            s = parseInt( Math.random()*data_len );
        html += &#39;<p class="item"v>&#39;+i+&#39;- &#39;+data.substr(start, s)+&#39;</p>&#39;;
    }
    html += &#39;</p>&#39;;
    document.querySelector(&#39;.list .cc&#39;).innerHTML = html+html; // 复制一份数据
    var height = document.querySelector(&#39;.list .ss&#39;).offsetHeight; // 一份数据的高度
    addKeyFrames( &#39;-&#39;+height+&#39;px&#39; ); // 设置keyframes
    document.querySelector(&#39;.list .cc&#39;).className += &#39; rowup&#39;; // 添加 rowup
}
init();

3 . 가로 스크롤

위의 설명은 모두 위로 스크롤하는 것이므로 왼쪽, 오른쪽, 아래로 변환하는 값을 해당 값으로 변경하면 이해하기 쉽습니다.

4. 요약

CSS를 사용하여 애니메이션을 표시하면 페이지가 더 부드러워집니다. CSS로 구현할 수 있다면 최대한 CSS로 구현해 보세요

관련 권장 사항:

캐러셀의 원활한 스크롤 효과를 얻기 위한 javascript

JavaScript 원활한 스크롤의 예제 코드에 대한 자세한 설명 효과

javascript로 구현됨 왼쪽 및 오른쪽으로 원활한 스크롤 효과

위 내용은 무한 루프 원활한 스크롤을 달성하기 위한 CSS3에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.