var width = innerWidth, 
    height = innerHeight*0.7,
    totalHeight = 3000

var body = d3.select('body').html('')

var outerSel = body.append('div')
  .st({
    width,
    height,
    marginTop: height/5,
    background: 'orange',
    overflowY: 'scroll'
  })
  .on('scroll', function(){
    var scrollY = this.scrollTop
    console.log(scrollY)
    lines.st({opacity: d => scrollY > d ? 1 : 0})
  })

var innerSel = outerSel.append('div')
  .st({
    height: totalHeight,
  })
  .on('scroll', function(){
    console.log('hi')

  })

var svg = innerSel.append('svg')
  .st({
    position: 'absolute', 
    top: height/5,
    overflow: 'hidden',
    pointerEvents: 'none'
  })
  .at({width, height})

var lines = svg.appendMany(d3.range(0, totalHeight, 10), 'path')
  .at({
    stroke: '#000', 
    fill: 'none',
    d: function(d){
      var x = Math.random()*width
      var y = Math.random()*height
      var θ = Math.random()*Math.PI*2

      return [
        'M', x, y, 
        'L', x + Math.cos(θ)*d, y + Math.sin(θ)*d
      ].join(' ')
    }
  })