鼠标滚轮控制侧边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>