FancyBox переопределяет вертикальный скролл ?
Есть такая проблема в последней версии всем известного плагина FancyBox когда модальное-iFrame окно всплывает то оно затрагивает вертикальный скролл страницы, на странице много контента и соответственно вертикальный скролл длинный, при всплытии плагин берет и убирает существующий скролл и заместо него просто резервирует скролл без ползунка, у меня на сайте некоторые блоки с position:fixed дергаются изза этого переопределения скролла.
Вот привожу ссылку на страницу где можете сами лицезреть мною описанное(нажмите на iFrame). Перепробовал все что знаю в итоге не получается сделать так чтобы скролл страницы вообще не затрагивался и не переопределялся Есть старая версия плагина FancyBox в ней как раз скролл не затрагивается скролл вот ссылка, внизу ссылки на iFrame. Как сделать также на новой версии плагина FancyBox чтобы не затрагивался вообще вертикальный скролл как на старой ? |
По ссылке (в примерах) не вижу никаких скачков. Скроллбар "блокируется", да, но скачков не наблюдаю. Я кстати раньше сам встречал подобные косяки, отписывался на гитхабе. Вроде в последней версии косяк исправили, но не факт что в некоторых случаях он проявляется. Давай ссылку на демку с проблемой.
|
переопределение заключается в удалении ползунка и просто резервировании места, как сделать чтобы не трогал скролл вообще и скролл с ползунком оставался ?
|
Там есть опция, lock вроде. Смотри документацию короче.
|
ilyas->,
$(".fancybox").fancybox({
helpers: {
overlay : {
showEarly : false
}
}
});
|
Цитата:
$(document).ready(function(){
function fancybox_show()
{
$(function () {
$.fancybox.open([
{
type: 'iframe',
href : '/vk.html'
// title : '
}
], {
padding : 0,
autoSize: false,
autoDimensions: false,
width: 416,
height: 416,
fitToView: false,
margin: 0
});
});
helpers: {
overlay : {
showEarly : false
}
}
}
var date = new Date();
var mSec = 20*1000;
function show_fancybox(){
if($.cookie('fancybox_show')){}else{
// запускаем fancybox
fancybox_show();
date.setTime(date.getTime()+mSec);
$.cookie('fancybox_show', date.getTime(),{ path: "/", expires: date});
}
}
$(function(){
show_fancybox();
setInterval(show_fancybox, 5000);
})
});
|
ilyas->,http://jsfiddle.net/XaWZE/
{
padding : 0,
autoSize: false,
autoDimensions: false,
width: 416,
height: 416,
fitToView: false,
margin: 0 ,
helpers : {
overlay : {
locked : false
}
}
}
|
Цитата:
|
Цитата:
Как решить эту проблему, не знаете? |
gradov81,
наличие кода повышает вероятность, что вам ответят |
Цитата:
Это родной код рекомендуемый создателем fancybox. При его использовании, если в css есть html {height: 100%;}, происходит скрол в верхнюю часть страницы когда нажимаешь на фото: $(document).ready(function() { $(".fancybox").fancybox({ openEffect : 'none', closeEffect : 'none' }); }); Этим кодом устраняется эта проблема (взят с этой страницы форума): $('.fancybox').fancybox({ padding : 0, helpers: { overlay: { locked: false } } }); при вызове фото скрола нет, а вот при нажатии на прокрутку следующего или предыдущего фото срабатывает скрол в верхнюю часть. Если не ошибаюсь, за прокрутку фото отвечает функция: $.fancybox.next $.fancybox.prev При срабатывании этих функций происходит скрол вверх страницы. |
gradov81,
http://fancyapps.com/fancybox/ если там у вас непрыгает, значит в вашем коде не учитывается нажатие на ссылку и идёт по ней переход. либо вёрстка барахлит, либо return false нужен. пишите макет смотрите код ниже -- прыгает или нет???
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript' src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<style type='text/css'>
div.hh{
height: 2000px;
}
html {height: 100%;}
</style>
<script type='text/javascript'>
$(function(){
$(document).ready(function() {
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none'
});
});
});
</script>
</head>
<body>
<div class="hh"></div>
<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>
<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>
</body>
</html>
|
Цитата:
html, body { height:100%; } Без него всё работает корректно, но разваливается вёрстка. Я не силён Javascript, но думаю эту проблему можно решить с помощью него. Может кто поможет? |
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 02:07. |