Почему css hover взаимодействует с javascript (fullpage.js) и как я могу это остановить?
Я использую два плагина, скроллер страниц на основе jquery и css, называемый fullpage.js, и эффект наведения CSS, который взаимодействует нежелательным образом. Если пользователь наводит курсор на одно из изображений с эффектом css, он каким-то образом запускает прокрутку страницы, чтобы активировать и перемещать страницу. Я не хочу, чтобы это произошло, и хотел бы остановить это. Вот кодовая ручка: http://codepen.io/ihatecoding/pen/pyEbqY
Я не знаю достаточно о CSS и JavaScript, чтобы понять, почему. Я просмотрел параметры fullpage.js и не смог найти ничего, что могло бы сработать - изменение "автопрокрутки" на false не помогло. Возможно, проблема в том, что css взаимодействует с двумя плагинами, а javascript может не вызывать взаимодействие.
Воспроизвести нежелательную автопрокрутку,
1) прокрутите, чтобы изображения в первом разделе (члены команды в "Разделе 1") находились вверху страницы, а половина окна была закрыта верхней частью окна.
2) Наведите указатель мыши на одно из изображений члена команды, вы увидите, что страница движется вниз.
Div, которые появляются при наведении курсора и которые, я полагаю, вызывают нежелательную прокрутку, похоже, относятся к классу.member__info.
Это код CSS для плагина, который я использовал для эффекта наведения мыши.
/* team member css */
$tisa: ff-tisa-web-pro;
$burlywood: #D9BC55;
$title-on-black: $burlywood;
.wrapper--team {
margin: 0;
padding: 2rem 1rem;
background-color: #E9E7D0;
}
.l-container {
margin: 0 auto;
}
@media screen and (min-width: 64em) {
.l-container {
max-width: 64rem;
}
}
@media screen and (min-width: 75em) {
.l-container {
max-width: 75rem;
}
}
.team-grid {
margin: 0;
text-align: center;
*zoom: 1;
&:before, &:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
.team-grid__member {
font-family: $tisa;
max-width: 100%;
padding: 0.5rem;
margin: 0 0 0.5rem;
display: inline-block;
float: none;
width: 100%;
text-align: center;
box-sizing: border-box;
position:relative;
}
@media screen and (min-width: 28em) {
.team-grid__member {
width: 49%;
max-width: none;
}
}
@media screen and (min-width: 42em) {
.team-grid__member {
width: 32.5%;
}
}
@media screen and (min-width: 62em) {
.team-grid__member {
width: 19.45%;
}
}
//////////////////////
// MODULE GRID
//////////////////////
.team-grid__member {
position: relative;
overflow: hidden;
}
.team-grid__member img {
width: 100%;
height: auto;
border: 8px solid #fff;
box-sizing: border-box;
display: block;
}
.member__info {
color: #fff;
height: 86%;
width: 86%;
position: absolute;
top: 16px;
left:16px;
opacity: 0;
background: rgba(0, 0, 0, 0.85);
backface-visibility: hidden;
transition: opacity 0.4s ease-in-out;
z-index:50;
}
.member__name {
color: $title-on-black;
font-size: 1rem;
letter-spacing: 1px;
line-height: 1.2rem;
margin-bottom: 0;
padding: 0 12px;
}
.member__title {
margin-bottom: 0.75rem;
font-size: 0.8rem;
font-weight: normal;
line-height: 1rem;
padding: 0 1.5rem;
}
a.member__link {
background: #D68D2C;
color: #FFF;
border-radius: 2px;
border: 0;
cursor: pointer;
display: inline-block;
font-size: 16px;
padding: 8px;
text-align: center;
text-decoration: none;
}
// FIX THE TOUCH METHOD
//.no-touch .team-grid__member:hover .member__info,
//.team-grid__member.cs-hover .member__info {
// opacity: 1;
//}
.team-grid__member:hover .member__info {
opacity: 1;
}
// ----- Middle Alignment Vertical ----- //
.member__info:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.center-vert-content {
display: inline-block;
vertical-align: middle;
}
/* end of current team member css */
Вот как я вызываю fullpage.js в своем коде ручки (я использую готовый документ и функцию в реальном документе, но кодпу это нравится):
$('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
scrollBar: true
});
Это ссылка на fullpage.js:
https://github.com/alvarotrigo/fullPage.js/blob/master/jquery.fullPage.js
Есть также некоторые CSS, связанные с плагином полной страницы, которые могут иметь отношение:
html.fp-enabled,
.fp-enabled body {
margin: 0;
padding: 0;
overflow:hidden;
/*Avoid flicker on slides transitions for mobile phones #336 */
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#superContainer {
height: 100%;
position: relative;
/* Touch detection for Windows 8 */
-ms-touch-action: none;
/* IE 11 on Windows Phone 8.1*/
touch-action: none;
}
.fp-section {
position: relative;
-webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
-moz-box-sizing: border-box; /* <=28 */
box-sizing: border-box;
}
.fp-slide {
float: left;
}
.fp-slide, .fp-slidesContainer {
height: 100%;
display: block;
}
.fp-slides {
z-index:1;
height: 100%;
overflow: hidden;
position: relative;
-webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */
transition: all 0.3s ease-out;
}
.fp-section.fp-table, .fp-slide.fp-table {
display: table;
table-layout:fixed;
width: 100%;
}
.fp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.fp-slidesContainer {
float: left;
position: relative;
}
.fp-controlArrow {
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
position: absolute;
z-index: 4;
top: 50%;
cursor: pointer;
width: 0;
height: 0;
border-style: solid;
margin-top: -38px;
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.fp-controlArrow.fp-prev {
left: 15px;
width: 0;
border-width: 38.5px 34px 38.5px 0;
border-color: transparent #fff transparent transparent;
}
.fp-controlArrow.fp-next {
right: 15px;
border-width: 38.5px 0 38.5px 34px;
border-color: transparent transparent transparent #fff;
}
.fp-scrollable {
overflow: scroll;
}
.fp-notransition {
-webkit-transition: none !important;
transition: none !important;
}
#fp-nav {
position: fixed;
z-index: 100;
margin-top: -32px;
top: 50%;
opacity: 1;
-webkit-transform: translate3d(0,0,0);
}
#fp-nav.right {
right: 17px;
}
#fp-nav.left {
left: 17px;
}
.fp-slidesNav{
position: absolute;
z-index: 4;
left: 50%;
opacity: 1;
}
.fp-slidesNav.bottom {
bottom: 17px;
}
.fp-slidesNav.top {
top: 17px;
}
#fp-nav ul,
.fp-slidesNav ul {
margin: 0;
padding: 0;
}
#fp-nav ul li,
.fp-slidesNav ul li {
display: block;
width: 14px;
height: 13px;
margin: 7px;
position:relative;
}
.fp-slidesNav ul li {
display: inline-block;
}
#fp-nav ul li a,
.fp-slidesNav ul li a {
display: block;
position: relative;
z-index: 1;
width: 100%;
height: 100%;
cursor: pointer;
text-decoration: none;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span{
height: 12px;
width: 12px;
margin: -6px 0 0 -6px;
border-radius: 100%;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
border-radius: 50%;
position: absolute;
z-index: 1;
height: 4px;
width: 4px;
border: 0;
background: #333;
left: 50%;
top: 50%;
margin: -2px 0 0 -2px;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span{
width: 10px;
height: 10px;
margin: -5px 0px 0px -5px;
}
#fp-nav ul li .fp-tooltip {
position: absolute;
top: -2px;
color: #fff;
font-size: 14px;
font-family: arial, helvetica, sans-serif;
white-space: nowrap;
max-width: 220px;
overflow: hidden;
display: block;
opacity: 0;
width: 0;
cursor: pointer;
}
#fp-nav ul li:hover .fp-tooltip,
#fp-nav.fp-show-active a.active + .fp-tooltip {
-webkit-transition: opacity 0.2s ease-in;
transition: opacity 0.2s ease-in;
width: auto;
opacity: 1;
}
#fp-nav ul li .fp-tooltip.right {
right: 20px;
}
#fp-nav ul li .fp-tooltip.left {
left: 20px;
}
.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell{
height: auto !important;
}
Любая помощь будет оценена!
2 ответа
Я не могу воспроизвести вашу проблему на Chrome по указанной вами ссылке. Перемещение изображений ничего не делает.
Кажется, ваша проблема может быть связана с fitToSection:true, Попробуйте выключить его.)(Опция fitToSection:false) В любом случае, если у вас есть больший раздел, чем область просмотра, которую вы должны использовать scrollOverflow:true а также scrollBar:false,
В противном случае, ваше единственное решение заключается в использовании autoScrolling:false,
Изменить: мои извинения. Я понимаю, что ответ, который относится к fitToSection: false от Alvaro, на самом деле делает то, что вы хотите. Я был введен в заблуждение тем фактом, что зависание над изображением не имело ничего общего с функцией автоматического подбора к разделу.
Оригинал: то, что вы описываете как свою проблему, похоже, именно то, для чего был написан fullPage.js. Полная страница перемещает полосу прокрутки так, что то, что вы видите, является одним из ее допустимых разделов.
Что делает настройка autoScrolling: false в вашем инициализаторе полной страницы, это совсем другое. Когда автопрокрутка установлена в значение true, одним движением колесика мыши будет прокручиваться весь раздел вниз или вверх. Когда установлено значение false, колесо мыши будет двигаться нормально, но в каждом случае через 1 секунду после того, как вы прекратили прокручивать, fullPage переместит окно в правильную часть.