为什么滚动时元素的scrollTop属性保持为0？

var wrap = document.querySelector('.wrap');

wrap.addEventListener('scroll', function() {
	var sub = document.querySelector('.sub');

	console.log(sub.scrollTop);	
});

body {
  background-color: white; }

.wrap {
  padding: 10px;
  border: 3px solid white;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 400px;
  overflow: scroll; }

.sub {
  height: 1200px;
  width: 200px;
  background: linear-gradient(orange, green, blue, red); }

<div class="wrap">
  <div class="sub"></div>
</div>