携帯端末の背景図固定fixed互換方法

背景図background-atachment:fixedはモバイル端末で多くサポートされていません.position:fixedを採用します.JSで解決します

.box{width: 100%;height: 100%;}
.fixedbg{position: fixed;left: 0;top: 0;z-index: -1; width: 100%;height: 100%;}

  1
  2
  3

window.onscroll = function(){
	//          
	document.querySelectorAll('.fixedbg').forEach(function(pre){
		var bound = pre.parentElement.getBoundingClientRect();
		var clip = 'rect('+ [bound.top + 'px', pre.parentElement.clientWidth + 'px', bound.bottom + 'px', 0].join() +')';
		pre.style.clip = clip;
	})
}

ソース:https://www.zhangxinxu.com/wordpress/2018/07/css-information-stream-advertisement/