div利用overflow产生能上下拉动的滚动条

<div id="box"
style="background:pink;overflow-y:scroll;word-break:break-all;width:150px;height:150px">
 dddddddddddddddddddddddddddddddddddddddddddddddasssssssss
 sssssssssssssssssssssssssssssssssssssssssssssssssssssssdddd
 jjjjjjjjjjjjjjjjjjjjjjjkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
  ggfdgdfgfffffdddddddddddddddfddddddddddddddddddddddddddddddddddddddd

</div>

1.overflow-y:scroll在y的方向上有滚动条。其中overflow-x也可以这样。

2.word-break:break-all;遇到边界就自动换行，这个非常重要，没有它的话1就实现不了。

3.width和height属性也是不可以缺少的，因为它提供了边界。

                                                           

对y轴是的滚动条进行精确定位(在上面代码的基础上)：

<script>
        window.onload = function(){
    var box = document.getElementById('box');
box.scrollTop = 50;
                 alert(box.scrollTop);
};
</script>

scrollTop属性可以对滚动条进行精确定位，即能查找滚动条的位置和设置滚动条的初始位置。

scrollLeft属性也可以进行控制。