渐隐效果仿dribble

Html

Css

Js

* { 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; }

$(document).ready(function() { var num = $('#pic li').length; var wSum = $('#pic li').outerWidth(true) * num; // alert(wSum); $('#pic').scroll(function() { //滚动宽度 var scrollLeft = $('#pic').scrollLeft(); //滚动最左侧显示渐隐效果 if (scrollLeft > 0) { $('#pic').addClass("is-scrolled"); } else { $('#pic').removeClass("is-scrolled"); } //到达最右侧隐藏渐隐效果 if (scrollLeft >= wSum - $('#pic').width() - 10) { // alert("滚动条已经到达底部为" + scrollLeft); $('#pic').addClass("is-end"); } else { $('#pic').removeClass("is-end"); } }); });

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

渐隐效果使用‘::after, ::before’定位写出的效果（注意：相对于外层的定位，不是相对于出滚动条对象的定位），然后通过js判断滚动条状态添加相应的类。