オリジナルjsで書いたスクロールバーを共有

    
        
        
        
    
    
        

                

                    

                
                
                    

                
            
            
                window.onload = function() {
                    var kuang = document.querySelector(".kuang");
                    var dot = document.querySelector('.dot');
                    var bg = document.querySelector('.bg');
                    var load1 = kuang.clientWidth * 0.1666;
                    var load2 = kuang.clientWidth * 0.3333;
                    var load3 = kuang.clientWidth * 0.5;
                    var load4 = kuang.clientWidth * 0.6666;
                    var load5 = kuang.clientWidth * 0.8333;
                    var load6 = kuang.clientWidth;
                    dot.onmousedown = function() {
                        document.onmousemove = function(e) {
                            var e = e || window.event;
                            var x = e.clientX;
                            var y = e.clientY;
                            var mx = x - kuang.offsetLeft;
                            var my = y - kuang.offsetTop;
                            if(mx < load1) {
                                dot.style.left = 0;
                                bg.style.left = -load6 + 'px';
                            } else if(mx > load1 && mx < load3) {
                                dot.style.left = load2 + 'px';
                                bg.style.left = -load4 + 'px';
                            } else if(mx > load3 && mx < load5) {
                                dot.style.left = load4 + 'px';
                                bg.style.left = -load2 + 'px';
                            } else if(mx > load5) {
                                dot.style.left = load6 + 'px';
                                bg.style.left = 0;
                            }
                            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                        }
                    }
                    kuang.onclick = function(e) {
                        var e = e || window.event;
                        var x = e.clientX;
                        var y = e.clientY;
                        var mx = x - kuang.offsetLeft;
                        var my = y - kuang.offsetTop;
                        if(mx < load1) {
                            dot.style.left = 0;
                            bg.style.left = -load6 + 'px';
                        } else if(mx > load1 && mx < load3) {
                            dot.style.left = load2 + 'px';
                            bg.style.left = -load4 + 'px';
                        } else if(mx > load3 && mx < load5) {
                            dot.style.left = load4 + 'px';
                            bg.style.left = -load2 + 'px';
                        } else if(mx > load5) {
                            dot.style.left = load6 + 'px';
                            bg.style.left = 0;
                        }
                    }
                    document.onmouseup = function() {
                        document.onmousemove = null;
                    }
                    /* try*/
                    function touchmove(event) {
                        var touch = event.targetTouches[0];
                        var mx = touch.pageX - kuang.offsetLeft;
                        if(event.targetTouches.length == 1) {　　　　
                            event.preventDefault();
                            if(mx < load1) {
                                dot.style.left = 0;
                                bg.style.left = -load6 + 'px';
                            } else if(mx > load1 && mx < load3) {
                                dot.style.left = load2 + 'px';
                                bg.style.left = -load4 + 'px';
                            } else if(mx > load3 && mx < load5) {
                                dot.style.left = load4 + 'px';
                                bg.style.left = -load2 + 'px';
                            } else if(mx > load5) {
                                dot.style.left = load6 + 'px';
                                bg.style.left = 0;
                            }
                        }
                    }

                    function touchstart(e) {
                        kuang.addEventListener('touchmove', touchmove, false);
                    }
                    dot.addEventListener("touchstart", touchstart, false);
                    document.addEventListener("touchend", function() {
                      //dot.removeEventListener("touchstart",touchstart,false);  
                        kuang.removeEventListener("touchmove", touchmove, false);
                    });
                }
            
    

其中有注意的问题！！！

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();  // ， 。