iTunesのようにスクロールできるUIをつくる

overflow: scroll をつかってiTunesのようにスクロールできるUIをつくってみました。
本当のiTunesにはスクロールバーがついているのですが、なんとなく無い方がかっこいい気がして消しています。
基本的にはCSSのみでつくっているのですが、左右に薄くはいっているborderを出したり消したりするところにJavaScriptをつかっています。
本当はスマートフォンにも対応しているのですが、サイズ的にPCで見ないと意味がわからないかもしれません。。。

DEMO

See the Pen Scroll UI like the iTunes by kimmy (@kimmy) on CodePen.

Pug

h1.ttl ずーしーほっきー

.scrollmask
  .scrollarea
    ul.lists
      li.list
        .photo
        p.ttl-list 立ち
      li.list
        .photo
        p.ttl-list 立ち（正面）
      li.list
        .photo
        p.ttl-list 立ち（左）
      li.list
        .photo
        p.ttl-list 立ち（後ろ）
      li.list
        .photo
        p.ttl-list 立ち（右）
      li.list
        .photo
        p.ttl-list 歩き
      li.list
        .photo
        p.ttl-list 走り
      li.list
        .photo
        p.ttl-list 走り（正面）
      li.list
        .photo
        p.ttl-list 走り（前屈み）
      li.list
        .photo
        p.ttl-list 走り（四足歩行）
      li.list
        .photo
        p.ttl-list すしになる
      li.list
        .photo
        p.ttl-list 寒い

SCSS

html {
  color: #404040;
  font: 10px "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", sans-serif;
}

body {
  margin: 30px 100px;
}

.ttl {
  margin-bottom: 20px;
  font-size: 2.4rem;
}

.scrollmask {
  box-sizing: border-box;
  padding: 10px 0;
  width: 100%; height: 320px;
  overflow: hidden;
  
  &.leftBorder {
    border-left: solid 1px #f1f1f1;
  }
  
  &.rightBorder {
    border-right: solid 1px #f1f1f1;
  }
}

.scrollarea {
  padding-bottom: 320px;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

.lists {
  font-size: 0;
  white-space: nowrap;
}

.list {
  display: inline-block;
  margin-right: 20px;
  width: 200px; height: 300px;
  font-size: 2rem;
  
  &:last-child {
    margin-right: 0;
  }
}

.photo {
  box-sizing: border-box;
  border: solid 1px #f1f1f1;
  border-radius: 43px;
  width: 200px; height: 200px;
  background: center center no-repeat;
  background-size: contain;
}

.ttl-list {
  margin-top: 10px;
  text-align: center;
}

.list {
  &:nth-child(1) .photo {
    background-image: url(http://www.city.hokuto.hokkaido.jp/uploads/fckeditor/info/kikakuHP/uid000013_20140120224401cb14fed5.png);
  }
  
  &:nth-child(2) .photo {
    background-image: url(http://www.city.hokuto.hokkaido.jp/uploads/fckeditor/info/kikakuHP/uid000013_2014012022470391783469.png);
  }
  
  &:nth-child(3) .photo {
    background-image: url(http://www.city.hokuto.hokkaido.jp/uploads/fckeditor/info/kikakuHP/uid000013_201401202247069d92b364.png);
  }
  
  &:nth-child(4) .photo {
    background-image: url(http://www.city.hokuto.hokkaido.jp/uploads/fckeditor/info/kikakuHP/uid000013_20140120224709ec69185b.png);
  }
  
  &:nth-child(5) .photo {
    background-image: url(http://www.city.hokuto.hokkaido.jp/uploads/fckeditor/info/kikakuHP/uid000013_20140120224713538895ad.png);
  }
  
  &:nth-child(6) .photo {
    background-image: url(http://www.city.hokuto.hokkaido.jp/uploads/fckeditor/info/kikakuHP/uid000013_2014012022473133f68262.png);
  }
  
  &:nth-child(7) .photo {
    background-image: url(http://www.city.hokuto.hokkaido.jp/uploads/fckeditor/info/kikakuHP/uid000013_201401202247351ee0a53f.png);
  }
  
  &:nth-child(8) .photo {
    background-image: url(http://www.city.hokuto.hokkaido.jp/uploads/fckeditor/info/kikakuHP/uid000013_20140120224741d42b4b60.png);
  }
  
  &:nth-child(9) .photo {
    background-image: url(http://www.city.hokuto.hokkaido.jp/uploads/fckeditor/info/kikakuHP/uid000013_201401202247486e693444.png);
  }
  
  &:nth-child(10) .photo {
    background-image: url(http://www.city.hokuto.hokkaido.jp/uploads/fckeditor/info/kikakuHP/uid000013_20140120224754f49f892c.png);
  }
  
  &:nth-child(11) .photo {
    background-image: url(http://www.city.hokuto.hokkaido.jp/uploads/fckeditor/info/kikakuHP/uid000013_2014012022572329901442.png);
  }
  
  &:nth-child(12) .photo {
    background-image: url(http://www.city.hokuto.hokkaido.jp/uploads/fckeditor/info/kikakuHP/uid000013_20140120225729e10117d6.png);
  }
}

JavaScript

((win, doc) => {
  
  "use strict";
  
  var scrollMask = doc.querySelector(".scrollmask"),
      scrollArea = scrollMask.querySelector(".scrollarea"),
      lists      = scrollArea.querySelector(".lists"),
      list       = doc.querySelectorAll(".list"),
      listsStyle = doc.defaultView.getComputedStyle(lists, null),
      listStyle  = doc.defaultView.getComputedStyle(list[0], null),
      listLength = list.length,
      leftLimit;
  
  win.addEventListener("resize", () => {
    leftLimit = 
      parseInt(listStyle.width, 10) * listLength + parseInt(listStyle.marginRight, 10) * (listLength - 1) -  parseInt(listsStyle.width, 10)　;
  }, false);
  
  win.dispatchEvent(new Event("resize"));
  
  scrollArea.addEventListener("scroll", (evt) => {
    if (scrollArea.scrollLeft > 0) {
      scrollMask.classList.add("leftBorder");
    } else {
      scrollMask.classList.remove("leftBorder");
    }
    
    if (scrollArea.scrollLeft >= leftLimit) {
      scrollMask.classList.remove("rightBorder");
    } else {
      scrollMask.classList.add("rightBorder");
    }
  }, false);
  
  scrollArea.dispatchEvent(new Event("scroll"));
  
})(window, document)