首页 > 编程语言 >视频直播源码,js控制滚动条位置

视频直播源码,js控制滚动条位置

时间:2023-03-20 14:12:52浏览次数:32  
标签:位置 元素 js 滚动条 源码 设置 ._

视频直播源码,js控制滚动条位置

今天遇到一个问题,scrollTop定位滚动条位置时不生效,查找问题发现在给元素设置滚动属性后,直接设置了该元素滚动条的位置,导致该元素没有子元素被撑起的时候就设置了滚动条位置,此时是没有滚动条出现的,怎么打印滚动条的高度都一直为0。

下面代码是先把图形渲染出来撑开父元素,给父元素设置滚动属性,设置滚动条的位置

 


 private renderData = () => {
 /* 图形渲染方法 */
        this.renderCanvas();
        /* 定位滚动条,要在图形渲染之后定位 */
        const dom = document.getElementById(this._para.container)
        dom!.style.overflow = "scroll"
        dom!.scrollTop = this._para.data.canvas.center.y
        dom!.scrollLeft = this._para.data.canvas.width / 2 - this._para.data.canvas.center._width / 2
}
 

设置元素滚动:

 


元素.style.overflow = "scroll"
 

 

设置滚动条位置:

 


元素.scrollTop=数值
元素.scrollLeft=数值
 

 

注:设置滚动条位置时,一定要确认的前提是滚动条出现。

 以上就是 视频直播源码,js控制滚动条位置,更多内容欢迎关注之后的文章

 

标签:位置,元素,js,滚动条,源码,设置,._
From: https://www.cnblogs.com/yunbaomengnan/p/17236085.html

相关文章

  • JS中对象解构时指定默认值
    待解构字段为原始值正常情况下constobj={a:1,b:2};const{a,b}=obj;console.log(a,b);//12当被解构字段缺失时constobj={a:1,};const{a,b}=obj......
  • js直接操作数据库会怎么样
        这几天刷脉脉的时候看到一个话题初看觉得可笑,再看陷入沉思,最后还是决定花点时间想清楚,写下来。 确实没见人这么干过,为什么呢?技术限制被技术限制了?据我......
  • js根据起始日期加间隔天数计算出结束日期
    getNewDay(dateTemp,days){dateTemp=dateTemp.split("-");//转换为MM-DD-YYYY格式varnDate=newDate(dateTemp[1]+"-"+dateTemp[2]+......
  • Qt Json 处理
    chatgpt#include<QJsonDocument>#include<QJsonObject>#include<QDebug>//从JSON字符串中解析数据voidparseJson(constQString&jsonString){//将JS......
  • Node.js的安装
    前面讲到了vue3的一些概念性的东西,今天我们就来讲Node.js的安装吧1.关于Node.js的安装这个是官方地址​​节点.js(nodejs.org)​​打开后是这个样子 选择左边长时间维护的......
  • 【Spring 源码学习系列】BeanNameAware#setBeanName 方法的调用时机
    一、背景前一节我们研究了​​《ApplicationContextAware方法的调用时机》​​,对IOC容器最核心的方法refresh有了初步的了解。这节,我们将借助BeanNameAware方法的......
  • JavaScript解析JSON
    一个对象以“{”开始,“}”结束。每个“key”后跟一“:”,“‘key/value’对”之间运用“,”分隔。遍历JSON对象中的数据,可通过for-in循环实现。数据{"主题":{......
  • 在IDEA搭建JDK8源码运行环境
    源码的代码里会有很多的引用,我们只是单纯的用文本阅读,效率和体验都很不好,也不能使用debug功能查看每一步的代码执行效果,所以就需要借助idea编辑器工具,可以使用快捷键跳转到......
  • SpringMVC返回JSON对象遇到的错误
    SPringMVC返回JSON对象遇到报错:org.springframework.web.servlet.handler.AbstractHandlerExceptionResolver.logExceptionResolved[org.springframework.http.converter......
  • JSONP、XHR的属性
    JSONP1、JSONP的原理script标签跨域不会被浏览器阻止JSONP主要就是利用scrip标签,加载跨域文件2、使用JSONP实现跨域服务端准备好JSONP接口https://www.imooc.com/api/......