鼠标滚轮控制侧边div上下翻动效果

css部分：

<style>
        * { margin: 0; padding: 0;}
        .wrap { width: 1000px; margin: 0 auto; overflow: hidden; zoom: 1;}
        .left { float: left; width: 800px; height: 500px; overflow: hidden;}
        .right { float: right; width: 200px; height: 500px; background-color: #ddd;}
        p { font: 30px/500px "Microsoft Yahei"; text-align: center;}

        .hd { height: 100px; background-color: #0ff;}
        .bd { overflow: hidden; zoom: 1;}
        .ft { height: 100px; background-color: #0ff;}
    </style>

html部分：

<div class="wrap">
    <div class="left">
        <div class="panel" style="background-color: #f00; color: #fff;">
            <p>只有这边可以滚动</p>
        </div>
        <div class="panel" style="background-color: #0f0; color: #fff;">
            <p>局部滚动似乎不太好用，如果上面有内容则会有偏移</p>
        </div>
        <div class="panel" style="background-color: #00f; color: #fff;">
            <p>即使配合 offset 也不能很好的解决</p>
        </div>
    </div>
    <div class="right">
        <p>这边不滚动</p>
    </div>
</div>

js部分：（此处需要引入jquery.js、easing.js和scrollify.js ）

<script>
    $(function() {
        $('.panel').css({'height': $('.left').height()});
        $.scrollify({
            section: '.panel',
            target: '.left'
        });
    });
</script>

 

转载于:https://www.cnblogs.com/shanhaihong/p/5691273.html