campus1

Решил проблему так

componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
}

componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
}

handleScroll = (event) => {
    let scrollTop = event.srcElement.body.scrollTop,
        itemTranslate = Math.min(0, scrollTop/3 - 60);

        console.log(itemTranslate);

    this.setState({
      transform: itemTranslate
    });
}

HTML - не особо вижу пользу от книги. Дел на 5 минут.
CSS:
раз
два
три
JS - на мой взгляд лучшее что есть это онлайн туториал от Кантора
Ну и Дэвид

Ну и опять же повторю за многими : Книги + сразу практика = Успех.

Если я правильно понял -

body::-webkit-scrollbar {
    width: 1em;
}
 
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
body::-webkit-scrollbar-thumb {
  background-color: orange;
  outline: 1px solid slategrey;
}

Я думаю ошибка в этом что написано document.getElementByTagName('ul')[0], а должно быть document.getElementsByTagName('ul')[0]. Попробуйте!