移動端網頁自定義滾動條

阿新 • • 發佈：2017-07-29

max view andro move .html class height transform inner

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta id="viewport" name="viewport" content="initial-scale=1.0,user-scalable=no,
                  minimum-scale=1.0, maximum-scale=1.0">
    <title>移動端網頁自定義滾動條</title>
    <style type="text/css">
        #outer_div{
            width: 100px;
            height: 100px;

             
/*position: absolute;*/
        }
        .inner_div{
            width: 100px;
            height: 100px;
            border: 1px solid #efefef;
        }
    </style>
</head>
<body>
<div>
我的開發經驗是，橫向滾動可以用overflow-x:scoll;<br />
然而豎向滾動，當滾到底時，會帶動整張頁面。原諒我這裏忘了測試，好像iphone不會帶動，android會帶動。<br />
這時候你要自己寫滾動。
 
</div>
<div id="outer_div">
    <div class="inner_div">1</div>
    <div class="inner_div">2</div>
    <div class="inner_div">3</div>
    <div class="inner_div">4</div>
    <div class="inner_div">5</div>
    <div class="inner_div">6</div>
    <div class="inner_div"></div>
    <div class="inner_div"></div>
    <div class="inner_div"></div>
    <div class="inner_div"></div>
    <div class="inner_div"></div>
    <div class="inner_div"></div>
    <div class="inner_div"></div>
    <div class="inner_div"></div>
</div>

<script type="text/javascript">
var 
 gundongX = 0;
var gundongY = 0;
var d = document;
var g = ‘getElementById‘;
var moveEle = d[g](‘outer_div‘);
var stx = sty = etx = ety = curX = curY = 0;

moveEle.addEventListener("touchstart", function(event) { //touchstart
    gundongX = 0;
    gundongY = 0;


    // 元素當前位置
    etx = parseInt(getT3d(moveEle, "x"));
    ety = parseInt(getT3d(moveEle, "y"));

    // 手指位置
    stx = event.touches[0].pageX;
    sty = event.touches[0].pageY;
}, false);

moveEle.addEventListener("touchmove", function(event) {
    // 防止拖動頁面
    event.preventDefault();

    // 手指位置 減去 元素當前位置 就是 要移動的距離
    gundongX = event.touches[0].pageX - stx;
    gundongY = event.touches[0].pageY - sty;

    // 目標位置 就是 要移動的距離 加上 元素當前位置
    curX = gundongX + etx;
    curY = gundongY + ety;

    // 自由移動
    // moveEle.style.webkitTransform = ‘translate3d(‘ + (curX) + ‘px, ‘ + (curY) + ‘px,0px)‘;
    // 只能移動Y軸方向
    moveEle.style.webkitTransform = ‘translate3d(‘ + 0 + ‘px, ‘ + (curY) + ‘px,0px)‘;


}, false);
moveEle.addEventListener("touchend", function(event) { //touchend
    etx = curX;
    ety = curY;
}, false);

function getT3d(elem, ename) {
    var str1 = elem.style.webkitTransform;
    if (str1 == "") return "0";
    str1 = str1.replace("translate3d(", "");
    str1 = str1.replace(")", "");
    var carr = str1.split(",");

    if (ename == "x") return carr[0];
    else if (ename == "y") return carr[1];
    else if (ename == "z") return carr[2];
    else return "";
}
</script>
</body>
</html>
//來自：http://www.cnblogs.com/samwu/p/3508548.html

移動端網頁自定義滾動條

max view andro move .html class height transform inner <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

CSS在移動端隱藏滾動條/自定義滾動條（scrollbar的各種屬性）

一個醜醜的滾動條在某些時候是非常礙眼的，移動端由於螢幕小的緣故，更是顯眼，最好還是讓它能不出現，就不出現。除了用div遮罩外，許多瀏覽器核心也提供了私有屬性控制滾動條的樣式。移動端多為weibkit核心，滾動條的定製方案提供的很完善，蠻強大的哦~ 最基本的，o

H5移動端開發基礎（三）自定義滾動條、實戰-音悅臺

自定義滾動條、實戰-音悅臺自定義滾動條 js封裝 transform.js tween.js scrollBar.js 音悅臺適配樣式 html

自定義滾動條—比例移動和滑鼠移動時移除其他功能的相容程式碼

要點： 1.因為各個不同版本的瀏覽器的，他們的滾動條的樣式不是一樣的，為了統一，自定義樣式。 2.核心問題跟上一個案例（高清放大鏡）是一樣的，就是怎麼保證成比例移動問題 3.滑鼠移動時，去除其他功能的相容程式碼問題程式碼： <!DOCTYPE html>

Vue.js 桌面端自定義滾動條元件|vue美化滾動條VScroll

基於vue.js開發的小巧PC端自定義滾動條元件VScroll。前段時間有給大家分享一個vue桌面端彈框元件，今天再分享最近開發的一個vue pc端自定義滾動條元件。 vscroll 一款基於vue2.x開發的網頁端輕量級超小巧自定義美化滾動條元件。支援是否原生滾動條、滑鼠移出是否自動隱藏、自定義滾動條尺寸

CSS3自定義滾動條樣式 -webkit-scrollbar

play 偽類 thumb area 沒有 :link 現在自定義滾動條 box ::-webkit-scrollbar {/*隱藏滾輪*/display: none;} 前言 webkit支持擁有overflow屬性的區域，列表框，下拉菜單，textarea的滾動條自定

每天一個JS 小demo之自定義滾動條。主要知識點：事件應用

prevent 數據滾動 sca listener 視頻希望特效 poi <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>D

CSS3自定義滾動條樣式之 -webkit-scrollbar

selection 單獨窗口請求方塊利用源碼 bsp 進行有沒有覺得瀏覽器自帶的原始滾動條很不美觀，同時也有看到很多網站的自定義滾動條顯得高端，就連chrome32.0開發板都拋棄了原始的滾動條，美觀多了。那webkit瀏覽器是如何自定義滾動條的呢？前言

css 自定義滾動條

har scroll meta ram arr 底部 over con logs 我遇到的場景：對於iframe窗口，自帶滾動條是整個窗口的大小。有時需要頂部或底部固定，則滾動條不應該觸碰到頂部或底部。那麽首先打開iframe時應該去掉滾動條 scrolling="no

自定義滾動條

nbsp 自定義 images 得到 scrolltop sem 自定義滾動條項目 demo 項目地址:https://pan.baidu.com/s/1c2LEXlm 業余時間寫了一個自定義滾動條主要是利用scrollTop和scrollLeft這兩個屬性來控制內部

css3自定義滾動條

enter ott char overflow htm har ado solid lang <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

css自定義滾動條樣式，自定義文字選擇樣式，設置文字不被選擇

sed 分享 play gpo radi https cal hid 右移 ::-webkit-scrollbar 滾動條整體部分 ::-webkit-scrollbar-thumb 滾動條裏面的小方塊，能向上向下移動（或往左往右移動，取決於是垂直滾動條還是水平滾動條）

js自定義滾動條

span get class src ffd osi down width eth 今天聽到別人說自定義滾動條，所以就在吃飯的時間寫了個 html部分 <div class="out" id="out"> <div class="inn

HTML自定義滾動條（仿網易郵箱滾動條）轉載

基本上 fma 內容 scrollbar color http code %20 water 它是使用CSS中的偽元素來實現的，主要由以下三個來完成： 1. -webkit-scrollbar：定義滾動條的樣式，如長寬。 2. -webkit-scrollbar-thumb

自定義滾動條樣式-transition無效

swe 我們 contain not dep bar ray 就是 overflow 問題需求是自定義滾動條樣式，然後2秒內無操作隱藏滾動條。 2s內隱藏比較麻煩，不能用css實現，只能監聽容器的touch事件，然後給滾動條加個opacity: 0的class。 .cla

wpf之自定義滾動條

horizon viewport maximum lap html 消失 tro getname imu 原文:wpf之自定義滾動條首先我們添加一個帶滾動條的textbox控件： <ScrollViewer Height="130" Width="620" Vert

jq自定義滾動條

//滾動條 $(function () { //文字高度 var contentH = $('.content').height(); //可視高度 var viewH = $('.talent-theory-border').height(); //滾動條

移動端vue切換路由滾動條恢復到頂部

問題描述：vue是單頁面應用。導致路由切換之後，之前的滾動距離會一直存在，頁面沒有到頂部。網上大部分的解決方案是利用路由的afterEach方法解決，如下所示， router.afterEach((to,from,next) => { window.sc

CSS3_拖曳原理_設定全域性點選捕獲_九宮格碰撞檢測_自定義滾動條

拖曳原理：元素的初始位置 + 滑鼠距離差 = 元素最終位置使元素可以拖動 function dragElement(obj){ obj.onmousedown = function(e){ e =

利用原生js實現自定義滾動條（可點選到達，拖動到達）

1.HTML檔案 div1是滾動條，div2是滾動小球，div3是文字區域容器，div4是文字區域。 <div id="div"> <div id="div1"> <div id="div2"> </div> </div&

移動端網頁自定義滾動條

相關推薦