* { margin: 0; padding: 0; box-sizing: border-box; } body { background: #363636; } .scrollable { overflow-x: auto; overflow-y: hidden; position: static; white-space: nowrap; } .wrapper { width: 800px; margin: 50px auto; position: relative; } .list { list-style: none; overflow-y: auto; overflow-y: hidden; width: 800px; height: 187px; font-size: 0;/*此处的 'font-size:0' 是为了解决inline-block带来的间距问题*/ } .list li { display: inline-block; width: 220px; height: 170px; margin-right: 10px; } .list li:last-child{margin-right:0;} .list li img { width: 100%; height: 100%; border: 10px solid #fff; } .scrollable::before, .scrollable::after { content: " "; height: 100%; position: absolute; top: 0; width: 25px; z-index: 1; } .scrollable.is-scrolled::before { background: linear-gradient(to right, #f4f4f4, rgba(244, 244, 244, 0)); left: 0px; visibility: visible; } .scrollable::after { background: linear-gradient(to right, rgba(244, 244, 244, 0), #f4f4f4); right: 0; visibility: visible; } .scrollable.is-end::after { background: none; right: 0; visibility: visible; }
渐隐效果使用‘::after, ::before’定位写出的效果(注意:相对于外层的定位,不是相对于出滚动条对象的定位),然后通过js判断滚动条状态添加相应的类。