如果在不考慮使用JS插件或者Query的情況下，基於錨點定位和overflow的選項卡，廢話不多說，直接上代碼，大家一看就明白
效果圖
CSS代碼
<style type="text/css">
.container{margin:30px auto;width:500px;height:250px;}
.container .tab_head{
height:40px;
background: #eee;
text-align: center;
}
.container .tab_head a{
line-height:30px;
margin:5px;
display:block;
float:left;
}
.container .tabs_cont {
width:498px;
height:238px;
border: 1px solid #eee;
overflow: hidden;
}
.container .tabs_cont .cont_page{
padding:10px;
width:100%;
height:238px;
overflow-y:auto;
}
</style>
HTML代碼
<div class="container">
<div class="tab_head">
<a class="click" href="#one">熱點</a>
<a class="click" href="#two">體育</a>
<a class="click" href="#three">經濟</a>
<a class="click" href="#four">娛樂</a>
</div>
<div class="tabs_cont">
<div class="cont_page" id="one">
<h4>白種人——上帝的驕子！</h4>
<p>去年暑假到上海，在一路電車的頭等裏，見一個大西洋人帶着一個小西洋人，相併地坐着。我不能確說他倆是英國人或美國人；我只猜他們是父與子。那小西洋人，那白種的孩子，不過十一二歲光景，看去是個可愛的小孩，引我久長的注意。他戴着平頂硬草帽，帽檐下端正地露着長圓的小臉。白中透紅的面頰，眼睛上有着金黃的長睫毛，顯出和平與秀美。我向來有種癖氣：見了有趣的小孩，總想和他親熱，做好同伴；若不能親熱，便隨時親近親近也好。在高等小學時，附設的初等裏，有一個養着烏黑的西發的劉君，真是依人的小鳥一般；牽着他的手問他的話時，他只靜靜地微仰着頭，小聲兒回答——我不常看見他的笑容，他的臉老是那麼幽靜和真誠，皮下卻燒着親熱的火把。我屢次讓他到我家來，他總不肯；後來兩年不見，他便死了。我不能忘記他！我牽過他的小手，又摸過他的圓下巴。但若遇着驀生的小孩，我自然不能這麼做，那可有些窘了；不過也不要緊，我可用我的眼睛看他——一回，兩回，十回，幾十回！孩子大概不很注意人的眼睛，所以儘可自由地看，和看女人要遮遮掩掩的不同。我凝視過許多初會面的孩子，他們都不曾向我抗議；至多拉着同在的母親的手，或倚着她的膝頭，將眼看她兩看罷了。所以我膽子很大。這回在電車裏又發了老癖氣，我兩次三番地看那白種的孩子，小西洋人！ </p>
<p>初時他不注意或者不理會我，讓我自由地看他。但看了不幾回，那父親站起來了，兒子也站起來了，他們將到站了。這時意外的事來了。那小西洋人本坐在我的對面；走近我時，突然將臉盡力地伸過來了，兩隻藍眼睛大大地睜着，那好看的睫毛已看不見了；兩頰的紅也已褪了不少了。和平，秀美的臉一變而爲粗俗，兇惡的臉了！他的眼睛裏有話：“咄！黃種人，黃種的支那人，你——你看吧！你配看我！”他已失了天真的稚氣，臉上滿布着橫秋的老氣了！我因此寧願稱他爲“小西洋人”。他伸着臉向我足有兩秒鐘；電車停了，這才勝利地掉過頭，牽着那大西洋人的手走了。大西洋人比兒子似乎要高出一半；這時正注目窗外，不曾看見下面的事。兒子也不去告訴他，只獨斷獨行地伸他的臉；伸了臉之後，便又若無其事的，始終不發一言——在沉默中得着勝利，凱旋而去。不用說，這在我自然是一種襲擊，“出其不意，攻其不備”的襲擊！ </p>
</div>
<div class="cont_page" id="two">
<h4>背影</h4>
<p>我與父親不相見已二年餘了，我最不能忘記的是他的背影。那年冬天，祖母死了，父親的差使也交卸了，正是禍不單行的日子，我從北京到徐州，打算跟着父親奔喪回家。到徐州見着父親，看見滿院狼藉的東西，又想起祖母，不禁簌簌地流下眼淚。父親說，“事已如此，不必難過，好在天無絕人之路！”</p>
<p>回家變賣典質，父親還了虧空；又借錢辦了喪事。這些日子，家中光景很是慘淡，一半爲了喪事，一半爲了父親賦閒。喪事完畢，父親要到南京謀事，我也要回北京唸書，我們便同行。</p>
<p>到南京時，有朋友約去遊逛，勾留了一日；第二日上午便須渡江到浦口，下午上車北去。父親因爲事忙，本已說定不送我，叫旅館裏一個熟識的茶房陪我同去。他再三囑咐茶房，甚是仔細。但他終於不放心，怕茶房不妥帖；頗躊躇了一會。其實我那年已二十歲，北京已來往過兩三次，是沒有甚麼要緊的了。他躊躇了一會，終於決定還是自己送我去。我兩三回勸他不必去；他只說，“不要緊，他們去不好！”</p>
</div>
<div class="cont_page" id="three">
<h4>動亂時代</h4>
<p>這是一個動亂時代。一切都在搖盪不定之中，一切都在隨時變化之中。人們很難計算他們的將來，即使是最短的將來。這使一般人苦悶；這種苦悶或深或淺的籠罩着全中國，也或厚或薄的瀰漫着全世界。在這一回世界大戰結束的前兩年，就有人指出一般人所表示的幻滅感。這種幻滅感到了大戰結束後這一年，更顯著了；有我們中國尤其如此。 </p>
<p>中國經過八年艱苦的抗戰，一般人都掙扎的生活着。勝利到來的當時，我們喘一口氣，情不自禁的在心頭描畫着三五年後可能實現的一個小康時代。我們也明白太平時代還遙遠，所以先只希望一個小康時代。但是勝利的歡呼閃電似的過去了，接着是一陣陣悶雷響着。這個變化太快了，幻滅得太快了，一般人失望之餘，不由得感到眼前的動亂的局勢好像比抗戰期中還要動亂些。再說這動亂是世界性的，像我們中國這樣一個國家，大概沒有足夠的力量來控制這動亂；我們不能計算，甚至也難以估計，這動亂將到何時安定，何時纔會出現一個小康時代。因此一般人更深沉的幻滅了。</p>
</div>
<div class="cont_page" id="four">
<h4>荷塘月色</h4>
<p>這幾天心裏頗不寧靜。今晚在院子裏坐着乘涼，忽然想起日日走過的荷塘，在這滿月的光裏，總該另有一番樣子吧。月亮漸漸地升高了，牆外馬路上孩子們的歡笑，已經聽不見了；妻在屋裏拍着閏兒，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，帶上門出去。</p>
<p>沿着荷塘，是一條曲折的小煤屑路。這是一條幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四面，長着許多樹，蓊蓊鬱鬱的。路的一旁，是些楊柳，和一些不知道名字的樹。沒有月光的晚上，這路上陰森森的，有些怕人。今晚卻很好，雖然月光也還是淡淡的。 </p>
<p>路上只我一個人，揹着手踱着。這一片天地好像是我的；我也像超出了平常的自己，到了另一世界裏。我愛熱鬧，也愛冷靜；愛羣居，也愛獨處。像今晚上，一個人在這蒼茫的月下，什麼都可以想，什麼都可以不想，便覺是個自由的人。白天裏一定要做的事，一定要說的話，現在都可不理。這是獨處的妙處，我且受用這無邊的荷香月色好了。</p>
<p>曲曲折折的荷塘上面，彌望的是田田的葉子。葉子出水很高，像亭亭的舞女的裙。層層的葉子中間，零星地點綴着些白花，有嫋娜地開着的，有羞澀地打着朵兒的；正如一粒粒的明珠，又如碧天裏的星星，又如剛出浴的美人。微風過處，送來縷縷清香，彷彿遠處高樓上渺茫的歌聲似的。這時候葉子與花也有一絲的顫動，像閃電般，霎時傳過荷塘的那邊去了。葉子本是肩並肩密密地挨着，這便宛然有了一道凝碧的波痕。葉子底下是脈脈的流水，遮住了，不能見一些顏色；而葉子卻更見風致了。 </p>
</div>
</div>
</div>
總結
其實原理很簡單；就是利用了HTML的錨點，固定DIV容器的大小尺寸就好了，利用overflow:hidden作用。
DEMO原型加入Q羣149663025下載，原型代碼存放在（組件開發和demo）文件夾下；
更多分享關注微信公衆號
