Панель прокрутки JQuery-Mobile
Я использую эти коды 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
UPDATE:
Если вы считаете невозможным сделать это таким образом, есть другой способ использования jquery.
В этом ffidle 2 вы увидите, что была написана функция, которая обнаруживает прокрутку вниз и . вверх на div. Теперь ему просто нужна функция, которая прокручивает страницу.
Ответы
Ответ 1
Если вы можете и хотите использовать jquery, это хороший плагин для замены полосы прокрутки. Прост и отлично работает, и он очень настраивается. Но вы должны переопределить CSS для вашего стиля и потребностей.
$(".container").mCustomScrollbar({ scrollbarPosition: 'outside' });
Здесь пример (также проверенный на мобильном устройстве).
И это - сайт плагина и doc.
Ответ 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
на любую часть страницы, которую вы хотите прокручивать, когда вы прокручиваете.