ant design 錨點採坑一 無滾動效果

cyccgirl發表於2019-03-05

本次目標是  類似於 目錄和內容關係 指定區域進行滾動

無效原因 猜測：沒有設定目標區域的高度 以及 超出之後 出現滾動條

<Row gutter={16}>
   <Col span={6}>
      <Card title="目錄" bordered={false}>    

          // 設定指定目標容器  記得帶上 官方事件  這樣就不會 進行路由跳轉
         <Anchor onClick={this.handleClick} getContainer={() => document.getElementById('content')}  >
            <Link href="#First"  title="第一章節"  />
            <Link href="#Second" title="第二章節" />
         </Anchor>
      </Card>
   </Col>
   <Col span={4}  >
      <Card title="內容" bordered={false} >
          //目標容器 處設定高度 以及 滾動
         <div  id='content' style={{height:100,overflow:'auto'}}> // 關鍵點
            <h1 id="First">第一章節</h1>
            <span>
               JavaScript是一種屬於網路的指令碼語言,已經被廣泛用於Web應用開發,常用來為網頁新增各式各樣的動態功能,為使用者提供更流暢美觀的瀏覽效果。通常JavaScript指令碼是通過嵌入在HTML中來實現自身的功能的。
               是一種解釋性指令碼語言（程式碼不進行預編譯）。
               主要用來向HTML（標準通用標記語言下的一個應用）頁面新增互動行為。
               可以直接嵌入HTML頁面，但寫成單獨的js檔案有利於結構和行為的分離。
               跨平臺特性，在絕大多數瀏覽器的支援下，可以在多種平臺下執行（如Windows、Linux、Mac、Android、iOS等）。
               Javascript指令碼語言同其他語言一樣，有它自身的基本資料型別，表示式和算術運算子及程式的基本程式框架。Javascript提供了四種基本的資料型別和兩種特殊資料型別用來處理資料和文字。而變數提供存放資訊的地方，表示式則可以完成較複雜的資訊處理。
         </span>
            <h1 id="Second">第二章節</h1>
            <span>
             它最初由Netscape的Brendan Eich設計。JavaScript是甲骨文公司的註冊商標。Ecma國際以JavaScript為基礎制定了ECMAScript標準。JavaScript也可以用於其他場合，如伺服器端程式設計。完整的JavaScript實現包含三個部分：ECMAScript，文件物件模型，瀏覽器物件模型。 [7]
            Netscape在最初將其指令碼語言命名為LiveScript，後來Netscape在與Sun合作之後將其改名為JavaScript。JavaScript最初受Java啟發而開始設計的，目的之一就是“看上去像Java”，因此語法上有類似之處，一些名稱和命名規範也借自Java。但JavaScript的主要設計原則源自Self和Scheme。JavaScript與Java名稱上的近似，是當時Netscape為了營銷考慮與Sun微系統達成協議的結果。為了取得技術優勢，微軟推出了JScript來迎戰JavaScript的指令碼語言。為了互用性，Ecma國際（前身為歐洲計算機制造商協會）建立了ECMA-262標準（ECMAScript）。兩者都屬於ECMAScript的實現。儘管JavaScript作為給非程式人員的指令碼語言，而非作為給程式人員的指令碼語言來推廣和宣傳，但是JavaScript具有非常豐富的特性。 [8]
            發展初期，JavaScript的標準並未確定，同期有Netscape的JavaScript，微軟的JScript和CEnvi的ScriptEase三足鼎立。1997年，在ECMA（歐洲計算機制造商協會）的協調下，由Netscape、Sun、微軟、Borland組成的工作組確定統一標準：ECMA-262。
            </span>
         </div>
         

      </Card>
   </Col>
</Row>複製程式碼


相關文章