TV瀑布流滚动

一. 局部纵向滚动

<style>
.main {
    width: 1920px;
    height: 1080px;
    position: relative;
}
.main_home{
    position: absolute;
    left:100px;
    width: 1750px;
    overflow-y: hidden;
    height: 900px;
}
</style>
<div class="main">
    <div class="main_home" id="floors">
        <div class="floor"></div>
        <div class="floor"></div>
        <div class="floor"></div>
    </div>
</div>
<script>
//node为当前焦点元素,滚动轴中每个节点的offsetTop是固定不变的，不受滚动影响
//焦点下移动时
var nextFloor = $(node).parents(".floor").next()[0];
document.getElementById("floors").scrollTop = nextFloor.offsetTop;
//焦点上移动时
var preFloor= $(node).parents(".floor").prev()[0];
document.getElementById("floors").scrollTop = nextFloor.preFloor;
</script>

二. 局部横向滚动