JQuery-Mobile滾動條

Question

我用這個css代碼在jquery-mobile中看到滾動條：

::-webkit-scrollbar {
    -webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
    width: 12px;
}
::-webkit-scrollbar:horizontal {
    height: 12px;
}
::-webkit-scrollbar-thumb {
    background-color:#CE0003;
    border-radius: 10px;
}
::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: grey;
}

當我用手機打開頁面時，滾動條可見，但在其上滑動，不起作用（它不會滾動頁面）。 我該如何解決這個問題？
你可以在這個小提琴中看到它1

更新：
如果您認為不可能這樣做，那么使用jquery還有另一種方法。
在這個文件2中，您可以看到已寫入一個功能，可以檢測向下 滑動並在div上向上滑動 。 現在它只需要一個滾動頁面的功能。

Answer 1

如果你可以並且想要使用jquery，這是一個很好的插件替換滾動條。 簡單，工作得很好，而且非常易於配置。 但是你必須根據你的風格和需要覆蓋一些CSS。

$(".container").mCustomScrollbar({ scrollbarPosition: 'outside' });

這里的例子（在移動設備上也經過測試）。

這是插件網站和文檔。

Answer 2

使用第二小提琴中的示例作為開頭，您可以這樣做：

//From the fiddle
var supportTouch = $.support.touch,
            scrollEvent = "touchmove scroll",
            touchStartEvent = supportTouch ? "touchstart" : "mousedown",
            touchStopEvent = supportTouch ? "touchend" : "mouseup",
            touchMoveEvent = supportTouch ? "touchmove" : "mousemove";
    $.event.special.swipeupdown = {
        setup: function() {
            var thisObject = this;
            var $this = $(thisObject);
            $this.bind(touchStartEvent, function(event) {
                var data = event.originalEvent.touches ?
                        event.originalEvent.touches[ 0 ] :
                        event,
                        start = {
                            time: (new Date).getTime(),
                            coords: [ data.pageX, data.pageY ],
                            origin: $(event.target)
                        },
                        stop;

                function moveHandler(event) {
                    if (!start) {
                        return;
                    }
                    var data = event.originalEvent.touches ?
                            event.originalEvent.touches[ 0 ] :
                            event;
                    stop = {
                        time: (new Date).getTime(),
                        coords: [ data.pageX, data.pageY ]
                    };

                    // prevent scrolling
                    if (Math.abs(start.coords[1] - stop.coords[1]) > 10) {
                        event.preventDefault();
                    }
                }
                $this
                        .bind(touchMoveEvent, moveHandler)
                        .one(touchStopEvent, function(event) {
                    $this.unbind(touchMoveEvent, moveHandler);
                    if (start && stop) {
                        if (stop.time - start.time < 1000 &&
                                Math.abs(start.coords[1] - stop.coords[1]) > 30 &&
                                Math.abs(start.coords[0] - stop.coords[0]) < 75) {
                            start.origin
                                    .trigger("swipeupdown")
                                    .trigger(start.coords[1] > stop.coords[1] ? "swipeup" : "swipedown");
                        }
                    }
                    start = stop = undefined;
                });
            });
        }
    };
    $.each({
        swipedown: "swipeupdown",
        swipeup: "swipeupdown"
    }, function(event, sourceEvent){
        $.event.special[event] = {
            setup: function(){
                $(this).bind(sourceEvent, $.noop);
            }
        };
    });

然后添加

$('.scrollbar').on('swipedown', function(){
    var SCROLL_FRACTION = 3;
    var height = document.body.scrollHeight;
    var width = document.body.scrollWidth;
    scrollTo(width, height - height / SCROLL_FRACTION);
});
$('.scrollbar').on('swipeup', function(){
    var SCROLL_FRACTION = 3;
    var height = document.body.scrollHeight;
    var width = document.body.scrollWidth;
    scrollTo(width, height + height / SCROLL_FRACTION);
});

然后，您只需將SCROLL_FRACTION更改為滑動時要滾動的頁面的任何部分。