console
let lyrics = Array(10).fill('歌词示例').map((e, i)=> `<p>${e} ${i + 1}</p>`)
$('.grandson1').append(lyrics)
var currentScroll = 0
var onmousewheel = function(e) {
let grandson = $('.grandson1')
grandson.css('transition', 'none')
let offset = currentScroll - (e.deltaY * 0.25)
console.log(offset, -grandson[0].offsetHeight)
currentScroll = offset > 0 ? 0 : offset < -grandson[0].offsetHeight ? -grandson[0].offsetHeight : offset
grandson.css('transform', `translateY(${currentScroll}px)`)
grandson.on('transitionend', () => {
grandson.css('transition', 'all 0.5s')
grandson.off('transitionend')
})
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1, initial-scale=">
<meta http-equiv="X-UA-Compatible" content="">
<title></title>
</head>
<body>
<div class="container">
<label>最外层</label>
<div class="father">
<label>father</label>
<div class="son1"><label>SON1</label></div>
<div class="son2" onmousewheel="onmousewheel">
<label>SON2</label>
<div class="grandson1">
<label>歌词 grandson1</label>
</div>
<div class="grandson-control">中间</div>
</div>
</div>
</div>
</body>
</html>
div, p {
position: relative;
padding: 0;
margin: 0;
box-sizing: border-box;
background: rgba(0,0,0,0.1);
}
label {
position: absolute;
right: 0;
}
.container {
height: 80vh;
width: 80vw;
}
.father {
height: 100%;
width: 80%;
display: flex;
flex-direction: column;
}
.son1 {
height: 90px;
width: 70%;
background: rgb(192, 207, 255);
}
.son2 {
position: relative;
height: 100%;
width: 70%;
background: rgb(78, 255, 211);
overflow: hidden;
}
.grandson1 {
transition: transform 0.5s;
position: absolute;
background: rgb(81, 177, 255);
top: 50%;
width: 100%;
}
.grandson1 p {
line-height: 1rem;
margin-bottom: 0.5rem;
padding: 1rem 1rem;
background: rgba(255,255,255,0.1)
}
.grandson1 p:last-child {
margin-bottom: 0;
}
.grandson-control {
position: absolute;
top: 50%;
background: 0;
width: 100%;
padding: 0 1rem;
line-height: 1px;
border-left: 20vw dashed rgba(255, 0, 0, 0.377);
}