how to alert message if element is visible current viewport?

Question

I need if element is visible current viewport alerts something message

.wrapper {
  margin: auto;
  width: 400px;
  height: 300px;
  outline: 1px solid red;
  overflow-y: scroll;
}

.element {
  font-family: sans-serif;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid grey;
}

.element.active{
  background: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="element">1</div>
  <div class="element">2</div>
  <div class="element">3</div>
  <div class="element">4</div>
  <div class="element">5</div>
  <div class="element">6</div>
  <div class="element">7</div>
  <div class="element active">I need when this is visible alert something</div>
</div>