Я пытаюсь использовать jQuery для уменьшения элементов в прокручиваемом div (а не в главном окне), когда они прокручиваются из вида. Я использую функцию fadeTo и проверяю позицию элемента как пользовательский свиток.fadeTo с JQuery, не работающим в Chrome на Retina Macbook Pro
See this stackoverflow thread for what I'm basing my code on.
Все, кажется, отлично работает на моем мониторе без сетчатки (с использованием Chrome). Верхний элемент исчезает прямо в верхней части прокручиваемого div, как предполагалось.
Однако, когда я выполняю те же действия, используя мой macbook pro w/retina display, я получаю странное поведение. Для некоторых элементов (не всех) в прокручиваемом div анимация fadeTo только угасает часть div (нижняя часть). Верхняя половина (или более иногда) не изменяется.
EDIT: WAS ABLE TO MAKE A DEMO (попробуйте просмотреть демо на мониторе по сравнению с сетчатой сеткой).
Любая идея, почему это произойдет? Почему это будет выглядеть по-другому на экране сетчатки, чем на моем мониторе (оба используют ту же версию Chrome)?
Следует также упомянуть, что весь этот html вводится в существующие веб-страницы, так что прокрутка div находится сверху страницы в верхнем правом углу (фиксированное положение). Я строй расширения хрома ... Мой код:
$('#volleyThreadDiv' + objectId).scroll(function() {
console.log('userDidscroll...');
$('.volleyComment').each(function() {
var height = $(this).css('height');
var heightNumeric = height.substring(0, height.length - 2);
heightNumeric = Number(heightNumeric);
if ($(this).position().top + heightNumeric < 130) {
$(this).stop().fadeTo(0, 0.2);
} else {
$(this).stop().fadeTo(0, 100);
}
});
$('.volleyReply').each(function() {
var height = $(this).css('height');
var heightNumeric = height.substring(0, height.length - 2);
heightNumeric = Number(heightNumeric);
if ($(this).position().top + heightNumeric < 130) {
$(this).stop().fadeTo(0, 0.2);
} else {
$(this).stop().fadeTo(0, 100);
}
});
});#volleyDiv {
\t position:fixed;
\t top: 20px;
\t right: 30px;
\t padding: 10px;
\t z-index: 999999999999999999999999999;
\t box-sizing: initial;
\t background: none;
\t border: none;
}
.volleyThreadDiv, #volleyActivityDiv {
\t position: static;
\t display: none;
\t max-height: 300px;
\t overflow-y: scroll;
\t background: none;
\t border: none;
}
.volleyThreadDiv::-webkit-scrollbar, #volleyActivityDiv::-webkit-scrollbar {
background-color: transparent;
}
.volleyComment, .volleyReply {
\t margin: 5px 5px 5px 5px;
\t padding: 5px;
\t border: 2px solid #63c5e2; /* blue border */
\t border-radius: 8px;
\t width: 155px;
\t background: white;
\t box-shadow: 0px 2px 1px #888888, -2px 2px 1px #888888;
\t box-sizing: initial;
}
.volleyCommentStatus, .volleyReplyStatus {
\t padding: 0px 5px 0px 5px;
\t margin: 0px 0px 0px 0px;
\t font-family: 'Avenir Next', Helvetica, sans-serif;
\t font-size: 12px;
\t font-weight: normal;
\t color: #262626;
\t line-height: 1.5;
\t word-wrap: break-word;
}
.volleyCommentStatus, .volleyReplyStatus {
\t text-align: left;
}
.volleyCommentStatus > a:link, .volleyReplyStatus > a:link, .volleyCommentStatus > a:visited, .volleyReplyStatus > a:visited {
\t font-family: 'Avenir Next', Helvetica, sans-serif;
\t font-weight: normal;
\t color: #63c5e2 !important;
\t text-decoration: none !important;
\t border: none;
\t padding: none;
\t margin: none;
\t background-color: white !important;
}
.volleyCommentStatus > a:hover, .volleyReplyStatus > a:hover {
\t font-family: 'Avenir Next', Helvetica, sans-serif;
\t font-weight: normal;
\t color: gray !important;
\t text-decoration: none !important;
\t border: none;
\t padding: none;
\t margin: none;
\t background-color: white !important;
}
.volleyCommentAuthor, .volleyReplyAuthor, .volleyCommentDate, .volleyReplyDate {
\t font-family: 'Avenir Next', Helvetica, sans-serif;
\t font-style: italic;
\t font-size: 10px;
\t font-weight: normal;
\t color: gray;
\t margin: 0px 5px 0px 0px;
\t line-height: 1.5;
}
.volleyReplyAuthor {
\t clear: both;
\t text-align: left;
\t padding: 0px 5px 0px 5px;
}
.volleyCommentAuthor {
\t clear: both;
\t text-align: left;
\t padding: 0px 5px 0px 5px;
}
.volleyCommentDate, .volleyReplyDate {
\t float: right;
\t margin: 0px 5px 0px 7px;
}
.volleyCommentReply {
\t float: right;
\t border: 2px solid #63c5e2; /* blue border */
\t border-radius: 8px;
\t background: #63c5e2;
\t padding: 2px 10px 2px 10px;
\t margin: 0px 0px 100px 0px;
\t font-family: 'Avenir Next', Helvetica, sans-serif;
\t font-size: 10px;
\t font-weight: normal;
\t color: white;
\t box-shadow: 0px 2px 1px #888888, -2px 2px 1px #888888;
\t box-sizing: initial;
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="volleyDiv" style="display: block;">
<div class="volleyThreadDiv" id="volleyThreadDivUAuCOyQuav" style="display: block;">
<div class="volleyComment" id="volleyCommentUAuCOyQuav">
<p class="volleyCommentDate">Feb 28th</p>
<p class="volleyCommentStatus">First comment!</p>
<p class="volleyCommentAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReply0wblbTaP1R">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">First comment!</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReplywBS0WFoUDH">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">Testing two comments on a a page.</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReply5zw2ww9GBo">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">Will it blend?</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReplythWrBLrkjy">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">Stay with me.</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyCommentReply" id="volleyCommentReplyUAuCOyQuav">Reply</div>
</div>
</div>
</body>
</html>
Может включать 'html' в stacksnippets? – guest271314
Просто добавил HTML и CSS. – jameswilsterman
Попробуйте использовать '.stop (false, true)' https://jsfiddle.net/JdbhV/1179/ http://api.jquery.com/stop/#stop-clearQueue-jumpToEnd – guest271314