龙岩市，福建省地级市，位于福建省西部，地处闽粤赣三省交界，通称闽西 [1] 。1997年5月撤地设市 [2] 。2019年常住人口为264万人，城镇人口153.12万人，城镇化率58%。 [3] 第七次人口普查显示龙岩市2020年常住人口数量272万人。
龙岩是海峡西岸经济区、全国革命老区、中央苏区的重要组成部分，七个县（市、区）均为原中央苏区县 [4] ，是全国赢得“红旗不倒”光荣赞誉仅有的两个地方之一 [5] ，享有“二十年红旗不倒”赞誉 [2] 。也是福建省最重要的三条大江――闽江、九龙江、汀江的发源地 [5] 。
龙岩曾经是远古时代“古闽人”的天堂，是“闽越人”的祖籍地，河洛人的祖居地之一和“南海国”的国都所在地及其中心区域，是享誉海内外的客家祖地 [2] 。龙岩有75%以上人口是客家人。龙岩是国家客家文化生态保护实验区，长汀被称为“客家首府”，汀江被誉为“客家母亲河”，永定客家土楼被列入世界文化遗产名录。客家文化和闽南文化在这里交融，孕育了龙岩人热情好客、勤劳开拓的品质 [1] 。
最近做项目的时候，遇到比较多局部滚动的需求，本来想偷懒直接在外层div加个css样式overflow:auto;就可以实现滚动，可是后来发现默认滚动条实在是太丑，尤其在mac的chrome和ie上，而且局部滚动的时候连同页面也在滚动。这种体验，只要有人测试，都会提出修改的建议，可是默认的无从修改，即使修改了样式也存在兼容性。除非自写方法，用js取代默认滚动方法。
为了以后的省事，干脆用个插件算了，可是网上找了一些插件，看了下效果，大部分都写得有bug，要不就是无法运用，要不就是不支持移动触摸，要不就是不会运用，通用性不强，也没仔细讲使用方法和注意事项，一气之下就自己写了个自己认为比较满意的方法。以下是方法：
复制代码(function(){function scrollFn(scrollContain,scrollContent,scrollbar){ var scloll=0;var $scrollContent=document.getElementById(scrollContent),$scrollHeight=$scrollContent.offsetHeight; var $iframe=document.getElementById(scrollContain), $iframeHeight=$iframe.offsetHeight; if(scrollbar){ var $scrollbar=document.getElementById(scrollbar); $scrollbar.style.height=$iframeHeight*$iframeHeight/$scrollHeight+"px"; var $scrollbarHeight=$scrollbar.offsetHeight; if($scrollbarHeight>=$iframeHeight){ $scrollbar.style.display="none"; } } $iframe.style.overflow="hidden";$iframe.style.position="relative";$scrollContent.style.position="absolute"; function scrollFunc(e){ var e=e||window.event;$scrollHeight=$scrollContent.offsetHeight; var wheelValue=e.wheelDelta/120||-e.detail; var dir=wheelValue>0?"up":"down"; if(dir=="up"){scloll+=80;}else{scloll-=80;} if(Math.abs(scloll)>$scrollHeight-$iframeHeight){ scloll=-$scrollHeight+$iframeHeight; } if(scloll>0){scloll=0;} $scrollContent.style.top=scloll+"px"; var $percent=Math.abs(scloll)/($scrollHeight-$iframeHeight); var $scrolllength=$iframeHeight-$scrollbarHeight; if(scrollbar){ $scrollbar.style.top=$percent*$scrolllength+"px"; } e.preventDefault(); return false; } //滑块滚动 if(scrollbar){ $scrollbar.style.opacity=0.8; $iframe.onmouseover=function(){ $scrollbar.style.opacity=1; } $iframe.onmouseout=function(){ $scrollbar.style.opacity=0.8; } $scrollbar.onmousedown=function(e){ var objY=this.offsetTop; var e=e||window.event; var y=e.clientY; var realY=y-objY; var _this=this; $scrollHeight=$scrollContent.offsetHeight; document.onmousemove=function(e){ var e=e||window.event; var y1=e.clientY; var realY2=y1-realY; if(realY2<0){realY2=0;}else if(realY2>$iframeHeight-$scrollbarHeight){ realY2=$iframeHeight-$scrollbarHeight; } _this.style.top=realY2+"px"; $scrollContent.style.top=-realY2/($iframeHeight-$scrollbarHeight)*($scrollHeight-$iframeHeight)+"px"; e.preventDefault(); return false; } document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; } } } if(document.addEventListener){ $iframe.addEventListener('DOMMouseScroll',scrollFunc,false);}$iframe.onmousewheel=scrollFunc; //移动端触摸滚动 (function(){ var x,y,begin_top; $iframe.addEventListener("touchstart",function(e){ var e=e||window.event; var touch = e.touches[0]; y = parseInt(touch.clientY); begin_top=$scrollContent.offsetTop; $scrollHeight=$scrollContent.offsetHeight; },false); $iframe.addEventListener("touchmove",function(e){ var e=e||window.event; e.preventDefault(); var touch = e.touches[0]; y1 = parseInt(touch.clientY); $scrollContent.style.top=begin_top+(y1-y)+"px"; if($scrollContent.offsetTop>0){ $scrollContent.style.top=0; }else if($scrollContent.offsetTop<-($scrollHeight-$iframeHeight)){$scrollContent.style.top=-($scrollHeight-$iframeHeight)+"px";} },false);})()}})();复制代码使用方法：
复制代码scrollFn("data-move","data-movecontent","scrollbar2");复制代码对应的data-move是外层容器id名字，data-movecontent是内容容器id名字，scrollbar2是滚动条id名字。 html例子：
复制代码<div id="data-move"> <div id="data-movecontent">这个事件在标准下和IE下是有区别的。firefox是按标准实现的,事件名为"DOMMouseScroll ",IE下采用的则是"mousewheel "。当然一行代码就解决了兼容问题</div><i id="scrollbar2"></i></div>复制代码
css就自己写了，这里不啰嗦，主要讲一讲注意事项：
1.每一个局部滚动都只需要通过调用方法scrollFn(),通过传参指定id值， 2.注意这三个值必须是id值，不带#，不能为class。 3.外层容器必须css声明position为relative或absolute。 4.只传两个参数也是可以的，即后面那个滚动条id可以不要。 5.外容器必须小于内容高度，否则你也没必要用滚动条吧~ 6.滚动条指定样式：width:5px;height:40px;display:block;background:gray;position:absolute;right:0;top:0;大小颜色这些可以自己修改
