задержка при прокрутке страницы в мобильной версии
На мобильных устройствах происходит задержка при обработке прокрутки. Как исправить?
$(function(){
$('.action-news').tabSlideOut({ //Класс панели
tabHandle: '.action-toggle-news', //Класс кнопки
//pathToTabImage: 'imgbutton.jpg', //Путь к изображению кнопки
//imageHeight: '100px', //Высота кнопки
//imageWidth: '30px', //Ширина кнопки
tabLocation: 'right', //Расположение панели top - выдвигается сверху, right - выдвигается справа, bottom - выдвигается снизу, left - выдвигается слева
speed: 300, //Скорость анимации
action: 'click', //Метод показа click - выдвигается по клику на кнопку, hover - выдвигается при наведении курсора
//topPos: '200px', //Отступ сверху
fixedPosition: true //Позиционирование блока false - position: absolute, true - position: fixed
});
});
(function($){
$.fn.tabSlideOut = function(callerSettings) {
var settings = $.extend({
}, callerSettings||{});
settings.tabHandle = $(settings.tabHandle);
var obj = this;
if (settings.fixedPosition === true) {
settings.positioning = 'fixed';
} else {
settings.positioning = 'absolute';
}
//set initial tabHandle css
settings.tabHandle.css({
'display': 'block',
'width' : settings.imageWidth,
'height': settings.imageHeight,
//'textIndent' : '-99999px',
//'background' : 'url('+settings.pathToTabImage+') no-repeat',
'outline' : 'none',
'position' : 'absolute'
});
obj.css({
'line-height' : '1',
'position' : settings.positioning
});
var properties = {
containerWidth: parseInt(obj.outerWidth(), 10) + 'px',
containerHeight: parseInt(obj.outerHeight(), 10) + 'px',
tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px',
tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px'
};
//set calculated css
if(settings.tabLocation === 'top' || settings.tabLocation === 'bottom') {
obj.css({'left' : settings.leftPos});
settings.tabHandle.css({'right' : 0});
}
if(settings.tabLocation === 'top') {
obj.css({'top' : '-' + properties.containerHeight});
settings.tabHandle.css({'bottom' : '-' + properties.tabHeight});
}
if(settings.tabLocation === 'bottom') {
obj.css({'bottom' : '-' + properties.containerHeight, 'position' : 'fixed'});
settings.tabHandle.css({'top' : '-' + properties.tabHeight});
}
if(settings.tabLocation === 'left' || settings.tabLocation === 'right') {
obj.css({
'height' : properties.containerHeight,
'top' : settings.topPos
});
settings.tabHandle.css({'top' : 0});
}
if(settings.tabLocation === 'left') {
obj.css({ 'left': '-' + properties.containerWidth});
settings.tabHandle.css({'right' : '-' + properties.tabWidth});
}
if(settings.tabLocation === 'right') {
obj.css({ 'right': '-' + properties.containerWidth});
settings.tabHandle.css({'left' : '-' + properties.tabWidth});
$('html').css('overflow-x', 'hidden');
}
//functions for animation events
settings.tabHandle.click(function(event){
event.preventDefault();
});
var slideIn = function() {
if (settings.tabLocation === 'top') {
obj.animate({top:'-' + properties.containerHeight}, settings.speed).removeClass('open');
} else if (settings.tabLocation === 'left') {
obj.animate({left: '-' + properties.containerWidth}, settings.speed).removeClass('open');
} else if (settings.tabLocation === 'right') {
obj.animate({right: '-' + properties.containerWidth}, settings.speed).removeClass('open');
} else if (settings.tabLocation === 'bottom') {
obj.animate({bottom: '-' + properties.containerHeight}, settings.speed).removeClass('open');
}
};
var slideOut = function() {
if (settings.tabLocation == 'top') {
obj.animate({top:'-3px'}, settings.speed).addClass('open');
} else if (settings.tabLocation == 'left') {
obj.animate({left:'-3px'}, settings.speed).addClass('open');
} else if (settings.tabLocation == 'right') {
obj.animate({right:'-3px'}, settings.speed).addClass('open');
} else if (settings.tabLocation == 'bottom') {
obj.animate({bottom:'-3px'}, settings.speed).addClass('open');
}
};
var clickScreenToClose = function() {
obj.click(function(event){
event.stopPropagation();
});
$(document).click(function(){
slideIn();
});
};
var clickAction = function(){
settings.tabHandle.click(function(event){
if (obj.hasClass('open')) {
slideIn();
} else {
slideOut();
}
});
clickScreenToClose();
};
var hoverAction = function(){
obj.hover(
function(){
slideOut();
},
function(){
slideIn();
});
settings.tabHandle.click(function(event){
if (obj.hasClass('open')) {
slideIn();
}
});
clickScreenToClose();
};
//choose which type of action to bind
if (settings.action === 'click') {
clickAction();
}
if (settings.action === 'hover') {
hoverAction();
}
};
})(jQuery);@media (min-width: 0px) and (max-width: 768px) {
.action-toggle {
top: initial!important;
width: 115px;
bottom: 0px!important;
position: fixed;
font-size: 17px;
font-weight: bolder;
text-align: center;
height: 30px;
background: #803514;
text-transform: uppercase;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(0deg);
padding: 7px;
color: white;
line-height: 27px;
left: -233px!important;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
letter-spacing: 0.043em;
}
.action-toggle-news {
top: initial!important;
width: 115px;
bottom: 0px!important;
position: fixed;
font-size: 17px;
font-weight: bolder;
text-align: center;
height: 30px;
background: #148051;
text-transform: uppercase;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(0deg);
padding: 7px;
color: white;
line-height: 27px;
left: -118px!important;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
letter-spacing: 0.043em;
}
}
@media (min-width: 769px) {
.action-toggle {
top: 158px!important;
width: 115px;
font-size: 17px;
font-weight: bolder;
text-align: center;
height: 30px;
background: #803514;
text-transform: uppercase;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
padding: 7px;
color: white;
line-height: 24px;
left: -75px!important;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
letter-spacing: 0.043em;
}
.action-toggle-news {
top: 291px!important;
width: 115px;
font-size: 17px;
font-weight: bolder;
text-align: center;
height: 30px;
background: #148051;
text-transform: uppercase;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
padding: 7px;
color: white;
line-height: 24px;
left: -75px!important;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
letter-spacing: 0.043em;
}
}
h3.a_text {
text-align: center;
text-transform: uppercase;
font-size: 24px;
font-weight: bold;
color: white;
line-height: 0.7;
margin-top: 4px;
}
.action-content {
position: relative!important;
height: 100%!important;
overflow: auto!important;
-webkit-transform: translateX(25px)!important;
-ms-transform: translateX(25px)!important;
transform: translateX(0px)!important;
padding-bottom: 20px!important;
}
.action-content-link {
font-size: 12px;
display: inline-block;
color: #ff7200;
border-bottom: 1px solid;
font-weight: bold;
margin-top: -7px!important;
margin-left: -65px!important;
position: fixed;
}
.action-content-head {
text-align: center;
padding: 3px 0px 11px!important;
height: 53px;
}
.action * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.action a {
text-decoration: none;
}
a.handle {
top: 152px!important;
}
.action-toggle:hover {
background: #b0491b;
}
.action-toggle-news:hover {
background: #65b138;
}
.action-toggle {
position: absolute;
cursor: pointer;
}
.action {
color: white;
position: fixed;
right: 0;
top: 0;
bottom: 0;
width: 526px;
z-index: 3000;
background-color: #344a59;
border-left: 3px solid #148051;
-webkit-transform: translateX(523px);
-ms-transform: translateX(523px);
transform: translateX(-3px);
/*-webkit-transition: all 0.6s ease;
transition: all 0.6s ease; */
}
.action {
height: auto!important;
}
.action.open {
height: auto!important;
color: white;
position: fixed;
right: 0;
top: 0;
bottom: 0;
max-width: 526px;
width:88%;
z-index: 3000;
background-color: #344a59;
border-left: 3px solid #803514;
z-index: 99999999999;
}
/* новости */
.action-news * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.action-news a {
text-decoration: none;
}
.action-toggle-news:hover {
background: #65b138;
}
.action-toggle-news {
position: absolute;
cursor: pointer;
}
.action-news {
olor: white;
position: fixed;
right: 0;
top: 0;
bottom: 0;
width: 526px;
z-index: 3000;
background-color: #344a59;
border-left: 3px solid #148051;
-webkit-transform: translateX(523px);
-ms-transform: translateX(523px);
transform: translateX(-3px);
/*-webkit-transition: all 0.6s ease;
transition: all 0.6s ease; */
}
.action-news {
height: auto!important;
}
.action-news.open {
height: auto!important;
color: white;
position: fixed;
right: 0;
top: 0;
bottom: 0;
max-width: 526px;
width:88%;
z-index: 3000;
background-color: #344a59;
border-left: 3px solid #72bf44;
z-index: 99999999999;
}
/* конец новости*/
@media (min-width: 0px) and (max-width: 500px){
.bloglatestnews7 {
margin: 0px!important;
margin-left: 20px!important;
min-height: 100%;
}
.bloglatestnews40 a {
font-size: 16px!important;
}
.bloglatestnews40 {
font-size: 16px!important;
}
.bloglatestnews6 {
font-size: 12px!important;
color: #ffffff!important;
}
}
@media (min-width: 500px) {
.bloglatestnews40 a {
font-size: 18px!important;
}
.bloglatestnews40 {
font-size: 18px!important;
}
}
.layer {
overflow: scroll; /* Добавляем полосу прокрутки */
width: 265px; /* Ширина блока */
height: 374px; /* Высота блока */
padding: 5px; /* Поля вокруг текста */
border: solid 1px black; /* Параметры рамки */
}
.bloglatestnews1 {
overflow: hidden!important;
padding: 0px!important;
margin: 0px 0px 10px!important;
}
.bloglatestnews2 {
margin: 0px!important;
padding: 0px!important;
float: left!important; margin-right: 5%!important; width: 45%!important;margin-bottom: 34px!important;
}
.bloglatestnews3 {
margin: 0px!important;
padding: 0px!important;
height: 100%px!important;
overflow: hidden;
}
.bloglatestnews3 img {
width: 100%!important;
border: 0px solid #D2D2D2!important;
margin: 0px!important;
padding: 0px!important;
float: none!important;
display: block!important;
opacity: 1!important;
max-width: none!important;
height: auto!important;
box-shadow: none!important;
border-radius: 0px!important;
}
.bloglatestnews3 img:hover {
opacity: 1!important;
}
.bloglatestnews40 {
margin: 0px!important;
padding: 0px!important;
line-height: 18px!important;
margin-top: 10px!important;
margin-bottom: 10px!important;
text-align: left!important;
text-shadow: none!important;
}
.bloglatestnews40 a {
line-height: 18px!important;
word-break: break-word;
color:#efef24!important;
font-weight: bold!important;
text-decoration: none!important;
text-align: left!important;
text-shadow: none!important;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.bloglatestnews40 a:hover {
opacity: 0.5;
}
.bloglatestnews5 {
margin: 0px!important;
padding: 0px!important;
font-size: 12px!important;
line-height: 15px!important;
text-align: left!important;
font-weight: normal!important;
text-shadow: none!important;
color: #222!important;
}
.bloglatestnews4 {
margin: 0px!important;
padding: 0px!important;
line-height: 18px!important;
margin-top: 10px!important;
margin-bottom: 10px!important;
text-align: left!important;
text-shadow: none!important;
}
.bloglatestnews4 a {
line-height: 18px!important;
word-break: break-word;
color:#57ff02!important;
font-weight: bold!important;
text-decoration: none!important;
text-align: left!important;
text-shadow: none!important;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.bloglatestnews4 a:hover {
opacity: 0.5;
}
.bloglatestnews6 {
margin: 0px!important;
padding: 0px!important;
line-height: 10px!important;
text-align: left!important;
color: #ffffff!important;
text-shadow: none!important;
font-weight: normal!important;
margin-top: 5px!important;
}
.bloglatestnews7 {
margin: 18px!important;
padding: 0px!important;
overflow: hidden!important;
min-height: 375px;
margin-left: 20px!important;
min-height: 100%;
}
carousel.owlCarousel({
// Точки под каруселью
pagination: true
}); <div class="action-news" style="line-height: 1; position: fixed; height: 876px; right: -526px;">
<!--<a class="handle" href="#">Смотреть</a> <!-- Ссылка для пользователей с отключенным JavaScript -->
<div class="action-toggle-news" style="display: block; outline: none; position: absolute; top: 0px; left: -115px;">Новости</div>
<div class="action-content-head">
<h3 class="a_text"><span>НОВОСТИ!</span></h3><br>
<a class="action-content-link" href="/news/">СМОТРЕТЬ ВСЕ НОВОСТИ</a></div>
<div class="action-content">
<div class="bloglatestnews1">
<div class="bloglatestnews7">{% for post in news|dictsort:"categ"|slice:":9" %}{% if post.categ == 1 %}<div class="bloglatestnews2">
<div class="bloglatestnews3">
<a href="{{ post.get_absolute_url }}{{ post.slug.url }}"><img src="{{ post.image_thumbnail.url }}"></a></div>
<div class="bloglatestnews4"><a href="{{ post.get_absolute_url }}{{ post.slug.url }}">{{ post.zagolovok }}</a></div><div class="bloglatestnews6">{{ post.publish.date}}</div></div>
{% endif %}{% endfor %}</div></div>