有時候，我們需要用到滾動條的功能，但是又不需要展示出滾動條給使用者看這種奇葩的需求，那麼我們要怎麼來實現呢？下面我提供了兩種方案，適用於pc端、也適用與移動端。
第一種方案，通過樣式來隱藏原生的滾動條，下面提供了兩種方式，但是這樣會導致偶現原生樣式的情況
第二種方案， 通過改變scrolltop來隱藏滾動條並實現滾動的效果
doctype
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>控制scrolltop滾動
title
>
<
style
type
="text/css"
>
.box
.inner-box
.inner-box li
style
>
head
>
<
body
>
<
div
class
="box"
>
<
ul class
="inner-box"
>
<
li>
蘋果1
li>
<
li>
梨子
li>
<
li>
哈哈
li>
<
li>
蘋果4
li>
<
li>
香蕉
li>
<
li>
大白*——*
li>
<
li>
哦哦^_^
li>
ul>
div>
body
>
html
>
<
script
>
varbox
=document.queryselector(
'.box'),
touchposition
={};
//實時的位置/**
*獲採樣式
*obj 物件
*name css名稱 */
function
getclass(obj, name)
else}//
獲取觸控點的位置
function
gettouchposition(e)
touchposition.x
=tagx;
touchposition.y
=tagy;
return
touchposition;
};//
獲取觸控開始位置
function
touchstartfun(e) ;
//觸控移動
function
touchmovefun(e)
else
} else
starty
=touchposition.y;
};function
bindtouchevent()
bindtouchevent();
script
>
如果專案需要，當然也可以通過控制函式的方式來控制快滑與慢滑的操作，以達到更好的適應移動端的效果
隱藏滾動條css3實現滾動同時隱藏滾動條
專案場景需求要在區域性實現滾動，但是滾動出現了滾動條，一瞬間感覺整個頁面都不好了，經過努力css成功實現滾動同時隱藏滾動條，廢話不多說，直接上 隱藏滾動條title ulli ulul webkit scrollbar style head 測試隱藏滾動條li 測試隱藏滾動條li 測試隱藏滾動條li...
隱藏滾動條
2018 03 17539view0 隱藏滾動條的同時還需要支援滾動，我們經常在前端開發中遇到這種情況，最容易想到的是加乙個iscroll外掛程式，但其實現在css也可以實現這個功能，我已經在很多地方使用了，下面一起看看這三種方法。在本站的側欄，你可以看到前端 的那塊內容並沒有滾動條，但滑鼠移上去卻...
css實現滾動並隱藏滾動條
在做網頁前端頁面時，有些場景需要實現滾動的效果，但是由於滾動條的出現，造成頁面效果有些突兀，不美觀。這時候就需要乙個既能滾動並能隱藏滾動條的效果了。1 簡單來說 需要3個盒子 2 最外層的盒子與最裡面的盒子要設定寬高 3 最外層的盒子需要設定相對定位 relative 溢位隱藏overflow hi...