javascript - JQuery-Mobile scrollbar - Stack Overflow

admin管理员组

文章数量:1399490

I use this css codes to make scroll bar visible in 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;
}

When I open the page with mobile the scroll bar is visible but swiping on it, isn't working (It wont scroll the page). How can I fix this issue?
You can see it in this fiddle 1

UPDATE:
If you think its impossible to do it this way ,there's another way using jquery.
In this ffidle 2 you can see that a function has been written which detects swipe down and swipe up on a div. Now it just needs a function that scrolls the page.

I use this css codes to make scroll bar visible in 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;
}

When I open the page with mobile the scroll bar is visible but swiping on it, isn't working (It wont scroll the page). How can I fix this issue?
You can see it in this fiddle 1

UPDATE:
If you think its impossible to do it this way ,there's another way using jquery.
In this ffidle 2 you can see that a function has been written which detects swipe down and swipe up on a div. Now it just needs a function that scrolls the page.

• javascript
• jquery
• css
• jquery-mobile

Share Improve this question Follow edited Jan 7, 2016 at 8:02 eylay asked Jan 1, 2016 at 7:28 eylayeylay 2,21044 gold badges3434 silver badges6363 bronze badges 6

• Why are you bothered about scroll bars on mobile devices? The whole point is that it's natural to simply swipe - scroll bars are way too small for us to use anyway with average size hands/fingers – StudioTime Commented Jan 3, 2016 at 9:12
• @DarrenSweeney I'm using an application which gives me an html file and i have to include it by <iframe>. swiping on the iframe not working and has no solution, So I have to make a scrollbar. qeshmbook./mobile.html Its my website you can check (With Mobile) to understand me better. – eylay Commented Jan 3, 2016 at 9:29
• I have tried iscroll (cubiq/iscroll-5) or other written scroll bars but I cant use them WITH iframe – eylay Commented Jan 3, 2016 at 9:30
• What are you attaching the scroller to? body? – StudioTime Commented Jan 3, 2016 at 9:42
• 1 The bigger issue here is that you're using an iframe on mobile. You should instead use ajax to put the content directly on the page and get rid of the iframe. Then you don't need to worry about scrollbars. – mindfullsilence Commented Jan 8, 2016 at 20:12

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 3 +100

If you can and want use jquery, this is a good plugin for scroll bar replacement. Is simple and work great and it is very configurable. But you must override some CSS for your style and needs.

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

Here the example (tested on mobile too).

And this is the plugin site and doc.

Using the example from your second fiddle as a beginning, you could do this:

//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);
            }
        };
    });

And then add

$('.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);
});

And then you can just change SCROLL_FRACTION to whatever fraction of the page you want to scroll when you swipe.

本文标签： javascriptJQueryMobile scrollbarStack Overflow