무한 루프 원활한 스크롤을 달성하기 위해 CSS3를 설명하는 예-CSS 튜토리얼-php.cn

무한 루프 원활한 스크롤을 달성하기 위해 CSS3를 설명하는 예

小云云

풀어 주다： 2017-12-23 13:20:40

원래의

3712명이 탐색했습니다.

페이지의 특정 모듈에서 일부 메시지를 무한 루프로 스크롤해야 하는 경우가 있습니다. 그렇다면 js를 사용하여 원활한 스크롤을 달성한다면(예를 들어 모듈이 위쪽으로 스크롤되는 경우) 아이디어는 무엇일까요? 이번 글에서는 CSS3를 이용하여 무한 루프 심리스 스크롤을 구현하기 위한 샘플 코드를 주로 소개하고 있는데, 에디터가 꽤 괜찮다고 생각해서 지금부터 공유하고 참고용으로 올려보겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

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

2. 위쪽 스크롤 거리 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);
        display: none;
    }
}
.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('style');
    style.type = 'text/css';
    var keyFrames = '\
    @-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);\
        }\
    }';
    style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, y);
    document.getElementsByTagName('head')[0].appendChild(style);
}

로그인 후 복사

원본 데이터의 높이를 계산합니다. A 마지막으로 addKeyFrames 메소드를 실행하고 헤드에 CSS 속성을 추가합니다. 그러면 여기의 행업이 이전 설정을 덮어쓰게 됩니다. A:

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

로그인 후 복사

3. 위에서 설명한 모든 내용은 스크롤입니다. 위, 왼쪽, 오른쪽, 아래가 이해하기 더 쉽습니다. 변환의 값을 해당 값으로 변경하면 됩니다.

4. 요약

CSS를 사용하여 애니메이션을 표시하면 페이지가 더 부드럽게 표시됩니다. CSS로 구현할 수 있다면 최대한 CSS로 구현해 볼 수 있습니다.