網(wǎng)上參考了一篇文章是橫向滾動(dòng)，現(xiàn)在實(shí)現(xiàn)了一篇縱向滾動(dòng)的抽獎(jiǎng)

// HomePage.js function HomePage() { let s = null;useEffect(() => {s = new Scroll({eleID: "roulette-container-1",scrollID: "item-case-goods-1",// targetID: "roulette-container-1-open",pageSize: 3,}) }, []);const onStart = () => {s.start(Math.floor(Math.random()*5)+1);}return (<div className='index'><div className="roulette-container" id="roulette-container-1"><ul id="item-case-goods-1" className="item-case-goods"><li className="item-small-case restricted" data-id="1"><img className="content-img" src={img1Src} alt="" /></li><li className="item-small-case restricted" data-id="2"><img className="content-img" src={img2Src} alt="" /></li><li className="item-small-case restricted" data-id="3"><img className="content-img" src={img3Src} alt="" /></li><li className="item-small-case restricted" data-id="4"><img className="content-img" src={img4Src} alt="" /></li></ul></div><div><Button className='start-btn' onClick={onStart}>開始</Button></div></div> ) } // HomePage.scss .content-img{width: 500px;height: 500px;margin: auto;display: block; } .start-btn {width: 300px;border: 2px solid red;color: red;background: white;margin-top: 50px; }.item-case-open {animation: mymove 1s infinite linear; }.roulette-container {position: relative;height: 502px;overflow: auto;}.roulette-container-open {border: 1px solid #00FF00;position: absolute;top: 0;width: 100%;height: 502px; }.item-case-goods {word-break: keep-all;white-space: nowrap;padding: 0px;margin: 0px;width: 100%;/*will-change: transform;*/ } // Scroll.js var Scroll = function ({eleID,scrollID,targetID = null,pageSize = 10,field = 'id',duration = 5,}) {this._targetElement = null;this._element = document.getElementById(eleID);this._scrollElement = document.getElementById(scrollID);if (targetID) this._targetElement = document.getElementById(targetID);this._size = pageSize;this._len = 0;this._ids = {};this._field = field;this._duration = duration;this._itemWidth = 0;this._itemHeight = 0;this.init();return this;} Scroll.prototype.init = function () {if (this._targetElement) {this._targetElement.style.position = 'absolute';this._targetElement.style['z-index'] = 100000;}this._scrollElement.style['will-change'] = 'transform';this._scrollElement.style.position = 'absolute';this._scrollElement.style.transform = 'translateX(0%)';this._scrollElement.style['z-index'] = 9999;// this._scrollElement.style['-webkit-transition'] = transition;// this._scrollElement.style['-moz-transition'] = transition;// this._scrollElement.style['-ms-transition'] = transition;// this._scrollElement.style['-o-transition'] = transition;// this._scrollElement.style['transition'] = transition;this.createNoneElement();let list = Array.from(this._scrollElement.children);this._len = list.length;this._itemHeight = this._scrollElement.children[0].clientHeight;console.log(this._itemHeight)list.forEach((item, index) => {this._ids[item.dataset[this._field]] = index;})for (var i = 0; i < this._size; i++) {this._scrollElement.innerHTML += this._scrollElement.innerHTML;} }Scroll.prototype.createNoneElement = function () {let child = document.createElement(this._scrollElement.children[0].tagName);child.classList.value = this._scrollElement.children[0].classList.value;console.log("tagName", this._scrollElement.children[0].classList.value)Array.from(this._scrollElement.children[0].style).forEach((item, index) => {child.style[item] = this._scrollElement.children[0].style[item]})child.innerHTML = '<div class="content-img" style="display: flex;justify-content: center;align-items: center;">很遺憾<br/>你今天不能吃飯</div>';this._scrollElement.append(child); }Scroll.prototype.start = function (winId) {let n = this._ids[winId] ? this._ids[winId] : this._ids[undefined],y =((this._size - 1) * this._len + Number(n)) * this._itemHeight;this._scrollElement.style.transform = 'translateY(0%)';this._scrollElement.style['transition-duration'] = '0ms';let handle = setTimeout(() => {this._scrollElement.style['transition-duration'] = this._duration + 's';this._scrollElement.style.transform = 'translateY(-' + y + 'px)';clearTimeout(handle);}) }export default Scroll

---

參考鏈接
js實(shí)現(xiàn)抽獎(jiǎng)滾動(dòng)效果

總結(jié)

以上是生活随笔為你收集整理的纵向抽奖滚动效果代码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。