闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁炬儳婀遍埀顒傛嚀鐎氼參宕崇壕瀣ㄤ汗闁圭儤鍨归崐鐐烘偡濠婂啰绠荤€殿喗濞婇弫鍐磼濞戞艾骞堟俊鐐€ら崢浠嬪垂閸偆顩叉繝闈涱儐閻撴洘绻涢崱妤冪缂佺姵濞婇弻宥堫檨闁告挻鐟х划璇差吋婢跺﹦锛熼梻渚囧墮閸楁洟宕堕澶嬫櫖濠电姴锕ら幊鎰版倿婵傚憡鐓熼幖鎼灣缁夌敻鏌涚€b晝鍔嶇紒鍌氱Т楗即宕奸悢鍝勫箰闂備礁鎲¢崝鎴﹀礉瀹€鍕劦妞ゆ帒鍊归弳顒侇殽閻愯尙绠婚柛鈺佸瀹曟ǹ顦寸紒鐘宠壘椤啴濡堕崱妤€顫囬梺绋匡攻濞茬喎顕i幖浣哥婵犫偓鍨归柊锝呯暦閹偊妾梻濠庡墻閸撶喖寮婚悢纰辨晩闁伙絽鏈崳鏉款渻閵堝啫鐏俊顐㈠暙閻g兘鎮㈤悡骞晠鏌曟径鍫濃偓鏇⑺夊鑸电厽闁绘柨鎽滈惌濠勭磼缂佹ê娴€规洘宀搁獮鎺楀箻閸撲胶妲囨繝娈垮枟閿曗晠宕滃☉銏╂晣婵炲樊浜濋埛鎴︽煙缁嬪灝顒㈤柣鎾卞劦閺屾稑螣閼姐倗鐓夐悗瑙勬礃閸ㄥ潡鐛Ο鑲╃<婵☆垳绮悵鏍⒒娓氣偓閳ь剛鍋涢懟顖涙櫠閹绢喗鐓欐い鏇楀亾缂佺姵鐗犲顐﹀箻缂佹ê浜归梺鑲┾拡閸擄箓宕ョ€n偂绻嗛柣鎰典簻閳ь剚鐗曡灋濞达綀顫夐崣蹇涙煏閸繍妯堥柡浣革躬閺岋繝宕堕妷銉т痪闂佹娊鏀辩敮鎺楁箒闂佹寧绻傞幊蹇涘箟閸濄儳纾煎璺鸿嫰閸斿菐閸パ嶈含妞ゃ垺娲熸慨鈧柍銉ュ帠濞n噣姊绘担绛嬪殐闁哥姵宀稿畷鎴﹀Χ婢跺﹥鐎梺鍛婂姦閸犳牜澹曢崗鍏煎弿婵☆垰娼¢崫娲煟閹垮嫮绉慨濠勭帛閹峰懘宕妷顬劌鈹戦埥鍡椾簻婵炵》绻濋獮鍐倷閻戞ɑ娅囬梺绋挎湰缁嬫垶绂嶅Δ鍛拺闂傚牊渚楀Σ鎾煛閸涱喚鐭掗柟顕嗙節閹垽宕楅懖鈺佸箰闂備焦鎮堕崕顕€寮插☉娆戭浄婵犲﹤鐗婇悡鍐喐濠婂牆绀堟繛鍡楅獜閼板潡姊洪鈧粔鎾倿閸偁浜滈柟鍝勭Х閸忓矂鏌涢悢鍝ュ弨闁哄瞼鍠栧畷娆撳Χ閸℃浼�     婵犵數濮烽弫鍛婃叏閻戣棄鏋侀柛娑橈攻閸欏繘鏌i幋锝嗩棄闁哄绶氶弻娑樷槈濮楀牊鏁鹃梺鍛婄懃缁绘﹢寮婚敐澶婎潊闁绘ê妯婂Λ宀勬⒑鏉炴壆顦﹂柨鏇ㄤ邯瀵鍨鹃幇浣告倯闁硅偐琛ラ埀顒€纾鎰版⒒閸屾艾鈧悂宕戦崱娑樺瀭闂侇剙绉存闂佸憡娲﹂崹浼村礃閳ь剟姊洪棃娴ゆ盯宕ㄩ姘瑢缂傚倸鍊搁崐宄懊归崶鈺冪濞村吋娼欑壕瑙勭節闂堟侗鍎忛柦鍐枛閺屻劌鈹戦崱鈺傂ч梺鍝勬噺閻擄繝寮诲☉妯锋闁告鍋為悘宥夋⒑閸︻厼鍘村ù婊冪埣楠炲啫螖閸愨晛鏋傞梺鍛婃处閸撴盯藝閵娾晜鈷戠紓浣股戦幆鍫㈢磼缂佹ḿ绠撴い鏇稻缁绘繂顫濋鐐扮盎闂佽崵鍋炵粙鍫ュ焵椤掆偓閸樻牗绔熼弴鐐╂斀闁绘劖娼欓悘锔姐亜韫囧骸宓嗘鐐差儔閺佸啴鍩€椤掑倸顥氶柛褎顨嗛悡娑㈡煕閵夈垺娅呴柡瀣⒒缁辨帡鎮╅懡銈囨毇闂佸搫鐬奸崰鎾诲焵椤掍胶鈯曞畝锝呮健楠炲﹪宕橀鐣屽幗闂婎偄娲ら敃銉モ枍婵犲洦鐓涚€光偓鐎n剛袦濡ょ姷鍋炲玻鍧楀焵椤掑嫭娑ч柟璇х節瀹曟艾鈽夐姀鈾€鎷洪梺鍛婄箓鐎氼厼锕㈡导瀛樼厽闁冲搫锕ら悘锕傛煟濞戝崬娅嶇€规洖鐖奸、妤呭焵椤掑倻鐭嗛柛宀€鍋為悡鏇熺節闂堟稑顏╅柛鏃€绮撻弻锟犲川椤撴粌浠┑顔硷功缁垶骞忛崨瀛樻優闁荤喐澹嗛濂告⒒娴g儤鍤€闁硅绻濋獮鍐磼閻愵亖鍋撴笟鈧浠嬪Ω閵壯呯嵁濠电姷鏁告慨瀵糕偓娑掓櫇缁辩偞鎯旈埦鈧弨浠嬫煟閹邦剙绾ч柍缁樻礀闇夋繝濠傚閻帗顨ラ悙鏉戠伌闁硅櫕绮撻幃娆撴焻濞戞氨娉块梻鍌欐祰椤鐣峰Ο琛℃灃婵炴垶鐟ч々閿嬬節婵犲倸鏆婇柡鈧禒瀣厓闁宠桨绀侀弳鐐烘煏閸ャ劎绠栭柟渚垮妽缁绘繈宕ㄩ鍛摋闂備胶鎳撳鍫曞箰閸愯尙鏆﹂柣鏃傗拡閺佸洭鏌i弮鍋冲綊寮查幖浣光拺閻犲洤寮堕崬澶嬨亜椤愩埄妲搁悡銈夋煟閺傛崘鑽$紓鍌涙皑閹叉悂寮崼娑掑亾娴e壊娼╅悹杞扮秿閵娾晜鐓ラ柡鍌氱仢閳锋棃鏌i敃鈧悧鎾愁潖濞差亜绠归柣鎰絻婵矂姊洪崨濠冪叆缂佸鎸抽崺銏狀吋婢跺⿴娼婇梺闈涚墕濡矂骞忓ú顏呯厽闁绘ê鍘栭懜顏堟煕閺傝儻瀚伴柍璇茬Ч楠炲洭鎮ч崼銏犲箥闂備礁鎲¢崹顖炲磹閺嶎偀鍋撳鐐

45fan.com - 路饭网

搜索: 您的位置主页 > 网络频道 > 阅读资讯:怎么样利用web现有DIV元素模拟滚动条?

怎么样利用web现有DIV元素模拟滚动条?

2016-08-28 17:26:45 来源:www.45fan.com 【

怎么样利用web现有DIV元素模拟滚动条?

首先声明这个办法不是我原创.但我在其他的地方没见到过,所以这里写出来大家共享.
web写多了有时候可能会用到单条的滚动条.怎么办?自己写一个吗?好麻烦,而且滚动条里面的滑块是动态变的.这里有一个简单的办法,用DIV来模拟.
关键原理:DIV里面的内容超出DIV的尺寸后,如果这个DIV设置的overflow是scroll,那么就会出现滚动条.好!滚动条你别动,我们就要你了.
根据这个原理,我们可以这样做:
1,创建一个层,如果你要横向的滚动条,则设置style的overflow-x为scroll,overflow-y为hidden.反之,纵向的话就是
style的overflow-y为scroll,overflow-x为hidden;
设定层的宽或者高为你想要的滚动条长度.然后向对应的设置高或者宽为0px;唉,我讲话大家估计听不明白,简单讲~就是把DIV拖成只剩下滚动条就对了,怎么拖?呵呵,系在马屁股上拉出去跑就是了.
2.在DIV里面放一个水平线,(如果你需要横向滚动条),size为0.如果要垂直方向的那就放一个宽度为0的DIV吧.
3.这样,这个DIV就可以那来当滚动条用了,具体用的时候我们只要把里面的水平线或者宽度为0的DIV的宽或者高设置成你要滚动的对像的scrollHeight就可以了,当然,这样的滚动条还不会有效果.我们要在模拟的滚动条的DIV上加onscroll事件,把这个DIV的scrollTop/scrollLeft同步给你要真正拖动的对象就可以了.
4.最后讲点不好的地方:这个模拟的DIV再怎么小也不会只剩下滚动条,也就是还会保留一点空白的空间,放在单元格里就看的很清楚了.所以用在其他层下面应该没问题(设置一个小一点的Z-Index就可以被遮挡住了).权当一种办法吧,有能力有时间还是自己写,封装一个的好.

 

本文地址:http://www.45fan.com/a/question/68986.html
Tags: 简单 Web 易行
编辑:路饭网
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部