Я делаю вызов AJAX, используя таймер для обновления содержимого. Во время этого обновления я теряю позицию прокрутки текста, и текст прокручивается не полностью. Прокрутка прекращается, когда при вызове AJAX происходит обновление страницы sh. Мне нужно, чтобы текст прокручивался полностью без каких-либо помех.
Для этого я пытаюсь найти позицию прокрутки с помощью свойства scrolltop
, но у меня это не работает. Пожалуйста, помогите мне полностью прокрутить текст без прерывания во время вызова AJAX.
В моем коде я использую 2-секундный таймер для вызова AJAX и обновляю страницу.
<div class='marquee' style='margin-top:1px;background-color:#6ec1f8;'>
<p>text</p>
</div>
var myVar = setInterval(function() {
myTimer()
}, 2000);
function myTimer() {
var pos = $(".marquee").scrollTop();
$.ajax({
type: "GET",
url: "",
data: '',
cache: true,
success: function(data) {
var $response = $(data);
var oneval = $response.find('#main_view').html();
$('#main_view').html(oneval);
$(".marquee").scrollTop(pos);
}
});
}
.marquee {
overflow: hidden;
position: relative;
background: #fefefe;
color: #333;
}
.marquee p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
text-align: center;
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
-moz-animation: scroll-left 2s linear infinite;
-webkit-animation: scroll-left 2s linear infinite;
animation: scroll-left 10s linear infinite;
}
@-moz-keyframes scroll-left {
0% {
-moz-transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
}
}
@-webkit-keyframes scroll-left {
0% {
-webkit-transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-100%);
}
}
@keyframes scroll-left {
0% {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}