屏幕宽度大于html宽度,css如何设超出屏幕宽度可以滑动

我曾经写过一个，和上面的方案一致，就是用js计算。感觉很麻烦...

写个大概思路让你参考：

Document

.cf:before,

.cf:after {

content: "";

display: table;

}

.cf:after {

clear: both;

}

.cf {

zoom: 1;

}

.wrap {

width: 100%;

}

.product-status {

width: 1000px;

overflow-x: scroll;

font-size: 0.722222rem;

border-bottom: 2px solid #F2F2F2;

border-top: 2px solid #F2F2F2;

}

.product-status div {

/*display: inline-block;*/

float: left;

margin-left: 0.666666rem;

margin-right: 0.666666rem;

padding: 0 10px;

}

.product-status div span {

display: inline-block;

margin-bottom: 0.333333rem;

}

育种

播种

发芽

除草

施肥

开花

挂果

其他

function fixWidth() {

var el = document.querySelector('#J_Fix');

var width = [].reduce.call(el.children, function (ret, item) {

var computedStyle = window.getComputedStyle(item);

var w = parseFloat(computedStyle.width) + parseFloat(computedStyle.marginLeft) + parseFloat(computedStyle.marginRight) + parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);

return ret + w;

}, 0);

el.style.width = width + 'px';

};

fixWidth();