你这个问题问的好大。
1、响应式布局：
media选择器。根据宽度通过样式控制页面布局
直接使用样式百分比来控制。
通过js监控页面宽度，然后通过js手动去控制页面布局，显示元素或者隐藏元素，设置某些元素宽高之类的。
2、鼠标滚动：常用 mousewheel 事件，滚动事件
3、动画效果 ：可以选择css3的动画，或者js自己写动画
综上所述：你需要通过 2的事件来控制1，不过1的样式中要加入动画样式（3）。大功告成
chm里都是方式方法。也有现成效果
在chrome下可以自定义滚动条样式，举个例子
::-webkit-scrollbar{
width: 6px
height: 6px
}
::-webkit-scrollbar-track-piece
{
background-color: rgba(204, 204, 204, 0.66)
-webkit-border-radius: 0px
}
::-webkit-scrollbar-thumb
{
border-radius: 6px
-webkit-border-radius: 6px
background-color: #7b7b7b
}
/*定义横向和纵向交点的样式*/
::-webkit-scrollbar-corner { background-color: transparent }
这里可以定义滚动条的粗细度和颜色等，至于更具体的诸如分别定义横竖滚动条样式等需要你自行修改。
另外也可以利用一些开源的滚动条插件来实现你需要的效果，比如我之前使用过的nicescroll.js，在浏览器兼容方面会好一些，但是可能会对系统的稳定性有影响，这个需要你权衡。
