JSFiddle - React, Tailwind, and code Playground

by lumart

HTML

<link rel="stylesheet" href="http://t.profebox.com/css/core.css">
<script src="http://t.profebox.com/script/mousewheel.js"></script>
<div class="tapeteContent curriculos_lista_r343" style="width: 420px; left: 60px; z-index: 1; ">
    <!-- editor de bloco -->
    <div class="content" style="display:none;">
    <script id="template_esc" type="CUR">
     <div class="listMenu">
        <div class="iconText" style="background:url(../images/square_curriculo.png)">
            <div class="iconLetra iconWhite">
                ${json.ano}
            </div>
        </div>
        <div class='iconCentro'>
            <div class="tituloMenu titulo">
                ${bigCube.corta(titulo,34)}
            </div>
            <div class="infoMenu ">
                    <span class="destaque">
                        {{if json.nivel!='0' && json.nivel>0}}Nível ${json.nivel}
                    </span> · {{else}}</span>{{/if}}
                    <span class="observacoes">
                    {{if tags}} ${bigCube.corta(tags,128)} {{else}} sem notas {{/if}}
                    </span>
                </div>
            </div>
            <div class='iconSeta'>
                <!-- aqui vai a seta -->
                <img src="images/seta_direita.png" class="seta"/>
                <div class="infoSeta">
                    <img src="images/loaderVerde.gif" class="icon listIconLoader"/>
                    <div class="information">
                        <img src="images/editar0.png" class="tinyIcon editar" {{if opcao==1}} style="display:none;"{{/if}}>
                        <img src="images/favorito1.png" class="tinyIcon favorito" {{if favorito==0}} style="display:none;"{{/if}}>
                    </div>
                </div>
               </div>
        </div>
    </script>
    </div>
    
    <!-- COINTEINER -->
    <div class="conteinerBlock">
        <div class="resLista" style="top: 59px; ">
            
        <div class="listMenu">         <div class="iconText"...

JavaScript

// Acho que aqui consegues fazer... 
// Testa isto:scrollHeight = $('.scrollContent').height();
scrollTopLimit = $('.tapeteContent').offset().top - $('.top').height();
scrollBottomLimit = window.innerHeight - $('.tapeteContent').height() - $('.top').height();
scrollTop = $('.tapeteContent').offset().top;
speed = 0.1; // velocidade da lista
windowHeight = window.innerHeight;


$(".tapeteContent").mousewheel(function (e){
    //alert('estas a fazer scroll dentro da lista\n Com uma força de: '+e.wheelDelta);

scrollTop = scrollTop + (event.wheelDelta * speed);

    if (window.innerHeight > scrollHeight) { // se a altura dos elementos for inferior a altura da janela a variavel volta ao original
        scrollTop = scrollTopLimit;
    } else if (scrollTop >= scrollTopLimit) { // se já subiu tudo poe a variavel original
        scrollTop = scrollTopLimit;
    } else if (scrollBottomLimit > scrollTop) { //se ultrapassou o limite do fundo fica com a top máximo
        scrollTop = scrollBottomLimit;
    }
    if ($(this).is(":animated")) {
        $(this).stop(true, true)
    }
    $('.tapeteContent').animate({
        top: scrollTop
    }, 1)




    
    //e.wheelDelta se for positivo chama uma função , se for negativo é chama outra função.
        });

$(window).resize(function() {
    // ao fazer resize redifine as variaveis
    scrollHeight = $('.tapeteContent').height();
    scrollBottomLimit = window.innerHeight - $('.tapeteContent').height() - $('.top').height();
    
    //calcular o factor da diferença da janela antes e depois
    
    factor = (windowHeight / window.innerHeight);
    
    scrollTop = scrollTop+factor;
    
    // repoe os valores maximos caso sejam ultrapassados
    if (window.innerHeight > scrollHeight) { // se a altura dos elementos for inferior a altura da janela a variavel volta ao original
        scrollTop = scrollTopLimit;
    } else if (scrollTop >= scrollTopLimit) { // se já subiu tudo poe a variavel original
        scrollTop =...