html自定义的DIV垂直滚动条

首先说一下自定义滚动条的一个要求：鼠标滚动在它div上滚动时，如果没有滚到顶端或底部则不能影响页面滚动条和系统自带一样

让一个div拥有滚动条

1、只有垂直滚动条

#mydiv1 {     position: relative;     overflow-x: hidden;     overflow-y: scroll;     width: 100px;     height: 100px; }

2、只有水平滚动条

#mydiv2 {     position: relative;     overflow-x: scroll;     overflow-y: hidden;     width: 100px;     height: 100px; }

3、有垂直和水平滚动条

#mydiv3 {     position: relative;     overflow: scroll;     width: 100px;     height: 100px; }

在自定义滚动条时我们可以隐藏原来的滚动条，但我们不宜使用下面这种方式：

#mydiv3 {     position: relative;     overflow-y: hidden;     width: 100px;

   overflow-wrap: break-word;      height: 100px; }

如果使用这种方式不好实现用鼠标滚动div时而不滚动页面，且需要靠js代码控制滚动。

我认为好的方案是：

保留它原来的滚动条，然后用其它div遮盖或剪裁掉它的滚动条，这种方式可以使用系统自带的鼠标滚轮滚动div内容，而且不会再滚动div内容时滚动整个页面。