css： .play { margin-top: 3rem; height: 22rem; background-color: #f2f7ff; border-top: 1rem #f2f7ff solid; border-radius: .5rem; border-bottom: 1rem #f2f7ff solid; overflow: hidden; overflow-y: auto; } /* 滚动条样式 */ .play::-webkit-scrollbar { width: 1rem; } .play::-webkit-scrollbar-thumb { border-radius: 1rem; background-color: skyblue; background-image: -webkit-linear-gradient( 45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent ); } .play::-webkit-scrollbar-track { box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1); background: #ededed; border-radius: 1rem; } html： <div class="play" id="play_div1"> <ul id="play_ul1"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> <li>666</li> <li>777</li> </ul> </div> ?js： function rollPlay(play_div, play_ul) { var div1 = document.getElementById(play_div); var ul1 = document.getElementById(play_ul); var scTop = ul1.offsetHeight - div1.offsetHeight + 20 // 这个20是1rem上下边框border的值 div1.scrollTop = scTop } rollPlay('play_div1', 'play_ul1')

参考简书：nomooo