首页 > 其他分享 >自创tab组件的高亮选项,如何滑动到页面中间?

自创tab组件的高亮选项,如何滑动到页面中间?

时间:2024-05-14 11:19:28浏览次数:14  
标签:const 自创 element getElementById tabsContainer tab 高亮 document

  const scrollToCenter = (element) => {
    const tabsContainer = document.getElementById('scrollView');//scrollView滚动的tab父元素
    const tabsContainerWidth = tabsContainer.offsetWidth;
    const elementLeft = element.offsetLeft;
    const elementWidth = element.offsetWidth;

    // 计算滚动的目标位置:元素左侧位置加元素宽度的一半,再减去容器宽度的一半
    const scrollX = elementLeft + elementWidth / 2 - tabsContainerWidth / 2;
    tabsContainer.scrollTo({
      left: scrollX,
      behavior: 'smooth',
    });
  };

  useEffect(() => {
    scrollToCenter(document.getElementById('activeTab'));
  }, [document.getElementById('activeTab')]);

标签:const,自创,element,getElementById,tabsContainer,tab,高亮,document
From: https://www.cnblogs.com/lyly96720/p/18190950

相关文章

  • Stable Diffusion WebUI 绘画
    配置环境介绍目前平台集成了StableDiffusionWebUI的官方镜像,该镜像中整合如下资源:立即免费体验:https://gpumall.com/login?type=register&source=cnblogsStableDiffusionWebUI版本:v1.7.0Python版本:3.10.6Pytorch版本:2.0.1CUDA版本:11.8Xformers版本:0.0.20Gradio版本......
  • create table as引发的问题
    转自:https://blog.csdn.net/leshami/article/details/73621561.createtableas引发的问题由于是对原表进行克隆,且数据存储在不同的表空间,因此毫不犹豫地使用了CREATETABLEAS,结果在运行package时,error...演示如下:--1、非空约束遗失-->使用createtableas来创建对象scott......
  • 1250 - Table 'd' from one of the SELECTs cannot be used in field list
    1问题描述sql数据库查询接口union后orderby某字段,提示错误“1250-Table'd'fromoneoftheSELECTscannotbeusedinfieldlist“。移除orderby条件,就不会报错,但是不满足按照某个字段排序。 2方案解决修改排序条件为:orderbystatId即可。(union后的结果是字段......
  • Stable Diffusion:原理、应用与未来展望
    一、引言在人工智能的快速发展中,StableDiffusion作为一种先进的随机过程模型,受到了广泛的关注。StableDiffusion不仅能够描述许多自然和人工系统中的随机演化行为,而且在多个领域展现出了广泛的应用潜力。本文将详细介绍StableDiffusion的原理、应用以及未来的发展趋势。立即......
  • layui table 选项卡刷新后依旧保留上一个打开的索引
    $(".layui-tab-titleli").click(function(){varmy_clue_detail_tab_index=$(this).index();sessionStorage.setItem("my_clue_detail_tab_index",my_clue_detail_tab_index);});$(function(){vargetPicTabN......
  • 【TransmittableThreadLocal】TransmittableThreadLocal的实现机制和原理
    1 前言前面我看过了 ThreadLocal的实现机制和原理 以及 InheritableThreadLocal的实现机制和原理 两种类型的ThreadLocal,前者是普通的,后者是在前者的基础上套了一层父子线程关系,当使用后者的时候,会在线程创建的时候,浅拷贝一份父线程的变量值。那么今天空了,我来看看另外一......
  • (非原创)Stable Diffusion 提示词prompt tag语法总结
    基本认知提示词会相互污染,要尽可能地做减法。XL版本主推使用自然语言使用注释将修饰词汇限定给某个主体,避免提示词污染1girl(silverlonghair,purpleeyes),yellowsuit2people(1girlAND1boy)2characters(1girlAND1dog)权重调整旧语法:(){}加大权重,[]......
  • Python-PostgreSQL主键自动填充报错:SAWarning: Column x is marked as a member of th
    importdatetimefromsqlalchemyimportColumn,String,inspect,Integerfromsqlalchemy.ext.declarativeimportdeclarative_basefromsqlalchemy.ormimportsessionmakerfromsqlalchemyimportcreate_engineengine=create_engine(DATABASE_URL)Base=decla......
  • mysql Code: 1093. You can't specify target table for update in FROM clause
    执行如下sql会报错,大概是delete的where条件里面不能包含自身的表deletefromt_plan_newwhereplan2codeisnotnullandplan2versionisnotnulland(plan2code,plan2version)notin(selectplan2code,max(plan2version)fromt_plan_newgroupbyplan2code) 所以用临......
  • el-table当前行的获取和设置,用于表格行操作
    1、在vue的data区声明当前行变量对象,如果当前行的信息用于了按钮的状态则需要赋予默认值,否则会报找不到属性的错误,比如下面会用到当前记录的status属性值控制按钮是否可用。//表格选中的行data(){return{currentRow:{status:'0'},}}2、在metho......