Edit in JSFiddle

$(function() {

    var showThumb;

    // 썸네일 열기 open

    $(".name").on("mouseenter", function() {
        var $this = $(this);
        var nowPos = $this.next().find("img").length - 1;
        $(this).next().scrollTop($(".thumb").outerHeight());

        function f() {

            if (nowPos == 0)
                clearInterval(showThumb);
            $this.next().find("img").eq(nowPos).css("visibility", "visible");
            nowPos--;
        }

        showThumb = setInterval(f, 50);

        $(".wrapper").on("mousemove", function(e) {
            var $wrapper = $this.next();
            var inactiveMargin = 150;
            var wrapperHeight = $wrapper.height();
            var thumbHeight = $wrapper.find(".thumb").outerHeight() + (2 * inactiveMargin);
            var top = (e.pageY - $wrapper.offset().top) * (thumbHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
            $wrapper.scrollTop(top + 10);
            console.log(top);

        });
    });
    //close

    // 썸네일 닫기 open
    $(".wrapper").on("mouseleave", function() {
        clearInterval(showThumb);
        $("img").css("visibility", "hidden");

    });


});

<ul>
    <li>
        <span class="name">MENU</span>
        <div class="wrapper">
            <div class="thumb">
                <img src="http://placehold.it/120x170"/>
                <img src="http://placehold.it/120x170"/>
                <img src="http://placehold.it/120x170"/>
                <img src="http://placehold.it/120x170"/>
                <img src="http://placehold.it/120x170"/>
                <img src="http://placehold.it/120x170"/>
                <img src="http://placehold.it/120x170"/>
                <img src="http://placehold.it/120x170"/>
                <img src="http://placehold.it/120x170"/>
                <img src="http://placehold.it/120x170"/>
            </div>
        </div>
    </li>
    <li>
        <span class="name">MENU</span>
        <div class="wrapper">
            <div class="thumb">
                <img src="http://placehold.it/120x170"/>
                <img src="http://placehold.it/120x170"/>
                <img src="http://placehold.it/120x170"/>
                <img src="http://placehold.it/120x170"/>
                <img src="http://placehold.it/120x170"/>
                <img src="http://placehold.it/120x170"/>
                <img src="http://placehold.it/120x170"/>
                <img src="http://placehold.it/120x170"/>
                <img src="http://placehold.it/120x170"/>
                <img src="http://placehold.it/120x170"/>
            </div>
        </div>
    </li>
</ul>

* {
  margin: 0;
  padding: 0;
}
html {
  overflow: hidden;
}
ul {
  position: fixed;
  width: 480px;
  height: 100%;
  bottom: 0;
  left: 0;
  font-size: 0;
}
li {
  position: relative;
  float: left;
  width: 120px;
  height: 100%;
}
li > span {
  display: block;
  position: absolute;
  width: 120px;
  height: 50px;
  bottom: 0;
  font-size: 15px;
  text-align: center;
  line-height: 50px;
}
.wrapper {
  position: absolute;
  width: 120px;
  top: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  visibility: hidden;
}
.thumb {
  width: 120px;
  visibility: hidden;
}