CodePen Embed - t_html_toc_width

 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
  <script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jstree/3.3.5/jstree.min.js"></script>

<div id='container'>
   <div id="tree">
    xxxxxxxxxxxxxxx
  </div>

  <div id="html_toc">
    <h1 class="hh1 t01">1</h1>
    <h2 class='t02'>1.1</h2>
    <h2 class='t02'>1.2</h2>
    <div>
      <h2 class='t02'>1.3</h2>
      <h2 class='t02'>1.4</h2>
      <h4 class="t04">解决方案1.5</h4>
      <pre>
           const t = new HtmlToc({ root: "#html_toc" }) 
           console.log(t.getTreeData())
           console.log(t.createPlatData())
           生成平级或者树形数据结构，

           根据这个结构套用对应的树组件 然后给树组件的节点添加点击时间

           此插件生成的树结构每一个节点都包含了节点 html 元素

           可以在点击事件中获取到

           调用
          node.scrollIntoView({
            behavior: 'smooth'
          })

          即可实现滚动
      </pre>
    </div>
    <h1 class="t01">2</h1>
    <h2 class='t02'>2.1</h2>
    <h2 class='t02'>2.2</h2>
    <h1 class="t01">3</h1>
    <h2 class='t02'>3.1</h2>
    <h2 class='t02'>3.2</h2>
    <h3 class="t03" id='last'>3.2.1</h3>
    <h1 class="t01">4</h1>
    <h2 class='t02'>4.1</h2>
    <h2 class='t02'>4.2</h2>
    <h1 class="t01">5</h1>
    <h2 class='t02'>5.1</h2>
    <h3 class="t03" id='last'>5.1.1</h3>
    <h2 class='t02'>5.2</h2>

  </div>
 </div>

html,body{height:100%; overflow:hidden;}
#container{
  height:100%;
  display:flex;
   overflow:hidden;
}    
#tree{
  width:150px;
  padding:10px;
  background-color:#eee;
}
#html_toc{
  flex:1;
  height:100%;
  overflow:auto;
   padding:10px;
}
.html_toc_node {
      cursor: pointer;
      font-size: 14px;
      user-select: none;
    }

    .html_toc_node[active] {
      color: green;
    }

    .html_toc_node_level_0 {
      padding-left: 20px;
    }

    .html_toc_node_level_1 {
      padding-left: 40px;
    }

    .html_toc_node_level_2 {
      padding-left: 60px;
    }

    .html_toc_node_level_3 {
      padding-left: 80px;
    }

    .html_toc_node_level_4 {
      padding-left: 100px;
    }

import HtmlToc from 'https://cdn.skypack.dev/t_html_toc@0.0.10';
const $=window.jQuery
const t2 = new HtmlToc("#html_toc", {
      selecters: ['.t01', '.t02', '.t03', '.t04'],
      titleKey: "text",
      clearParent: true
    })
    const data = t2.getTreeData()
    $('#tree').jstree({
      'core': {
        'data': data,
        "plugins": ["checkbox"],
        'check_callback': function () { return true; }
      }
    }).on('changed.jstree', (e, data) => {
      // 这么取值完全是插件是这么设计的，
      let html_tocTarget = data.node.original._html_toc_node
      html_tocTarget.scrollIntoView({
        behavior: 'smooth',
        block:'center'
      })
    })

This Pen is owned by xiaomitangtang on CodePen.

See more by @xiaomitangtang on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.