Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to set up comment scrolling in html5, which is very detailed and has certain reference value. Friends who are interested must finish reading it!

Comment on the scrolling effect in the live room. Click below to view the historical message and stop scrolling. If there is a new message, there will be a new message reminder. Click to scroll to the bottom.

two。 Specific code

{{item.name}}: {{item.content}} {{restComment}} new messages import smoothscroll from 'smoothscroll-polyfill';import {debounce, isScrollBottom} from'. / utils/utils';smoothscroll.polyfill () / / Mobile scrollTo behavior: polyfillexport default {data () {return {list: [], restComment: 0, restNums: 0, wrapperDom: null, listDom: null, wrapperHeight: 0};}, mounted () {this.initDom (); / / ajax... Const data = new Array (20). Fill (''); this.queue (data); setTimeout () = > {const list = new Array (10). Fill ('); this.queue (list);}, 30000);}, methods: {initDom () {this.wrapperDom = this.$refs.wrapper; this.listDom = this.$refs.list; this.wrapperHeight = this.wrapperDom.offsetHeight }, addTimeOut (opt) {return new Promise ((resolve, reject) = > {setTimeout () = > {this.addComment (opt); resolve ()}, 500);}) }, / / queue add message async queue (data) {for (let I = 0; I)

< data.length; i++) { const opt = { name: i + "-用户名", content: i + "-评论内容", id: Date.now() } await this.addTimeOut(opt); } }, addScroll() { debounce(this.listScroll, 200);this.isBindScrolled = true; }, listScroll() {const ele = this.wrapperDom;const isBottom = isScrollBottom(ele, ele.clientHeight);if (isBottom) { this.restNums = 0; this.restComment = 0; } }, // 添加评论 如果超过150条就将前50条删除addComment(data) {if (this.list.length >

) {this.list.splice (0,50);} this.list.push (data); this.$nextTick (() = > {this.renderComment ();});}, / / render comments renderComment () {const listHight = this.listDom.offsetHeight;const diff = listHight-this.wrapperHeight; / / the difference between list height and container height const top = this.wrapperDom.scrollTop / / list scrolling height if (diff-top

< 50) { if (diff >

0) {if (this.isBindScrolled) {this.isBindScrolled = false;this.wrapperDom.removeEventListener ("scroll", this.addScroll);} this.wrapperDom.scrollTo ({top: diff + 10, left: 0, behavior: "smooth"}); this.restNums = 0 }} else {+ + this.restNums;if (! this.isBindScrolled) {this.isBindScrolled = true;this.wrapperDom.addEventListener ("scroll", this.addScroll);}} this.restComment = this.restNums > = 99? "99 +": this.restNums;}, / / scroll to the bottom scrollBottom () {this.restNums = 0 / / clear the remaining message this.restComment = this.restNums;this.wrapperDom.scrollTo ({top: this.listDom.offsetHeight, left: 0, behavior: "smooth"});}; * {padding: 0; margin: 0;} .comment {width: 70% Height: 350px; position: relative; margin: 100px 00 20px;} .comment-wrap {height: 350px; overflow-y: scroll;-webkit-overflow-scrolling:touch;} .comment-wrap li {text-align: left; line-height: 30px; padding-left: 10px Background: rgba (0,0,0,0.3); margin-top: 5px; border-radius: 15px; color: # fff;}. Rest-nums {position: absolute; height: 24px; line-height: 24px; color: # f00; border-radius: 15px Padding: 015px; bottom: 10px; background: # fff; font-size: 14px; left: 10px;}

The two tool functions used:

/ * * @ desc function anti-shake * @ param {function requiring anti-shake} func * @ param {delay time} wait * / export function debounce (func, wait = 500) {/ / cache a timer idlet timer = 0 / / the function returned here is the anti-shake function actually called by the user / / if the timer has been set, clear the last timer / / start a new timer Delay the execution of the user-passed method return function (... args) {if (timer) clearTimeout (timer) timer = setTimeout (() = > {func.apply (this, args)}, wait)}} / * * @ desc whether to roll to the bottom of the container * @ param {scroll container} ele * @ param {container height} wrapHeight * / export function isScrollBottom (ele, wrapHeight Threshold = 30) {const H2 = ele.scrollHeight-ele.scrollTop Const h3 = wrapHeight + threshold;const isBottom = H2

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.