Почему скольжение (свертывание) справа налево создает полосу прокрутки, а LTR - нет? - PullRequest
Новая
       15

Почему скольжение (свертывание) справа налево создает полосу прокрутки, а LTR - нет?

1 голос
/ 03 августа 2011

tldr: смотрите здесь: http://joon.be/dalida/ парить над желтым «городом» и над синим «городом». Желтый не создает полосу прокрутки, а правильный. Почему?

Длинная версия: У меня есть линия, входящая с левой стороны, чтобы указать на что-то, когда оно зависло. Это работает. Я пытаюсь сделать то же самое с правой стороны, тот же принцип, только что отраженный, и выяснил, как это сделать, но у него есть странный побочный эффект создания горизонтальной полосы прокрутки, поскольку изображение частично выходит за пределы экрана. , На левой стороне этого не происходит, хотя он работает почти так же, как понимают.

Вот слева, работает, код: 

$('.dalidatown').hover(function(){
    $('.dalidapath').stop().animate({width: '903px'});
},function(){
    $('.dalidapath').stop().animate({width: '0px'});
});

'path' - это div, у которого линия является фоном. Вот CSS для этого: 

.path {
    position: absolute;
    border: 0px;
}

.dalidapath {
    width: 0px;
    height: 83px;
    z-index: 10;
    top: 130px;
    left: 50%;
    margin-left: -1110px;
    background-image:url('bin/dalidapath.png'); 
}

Теперь на правой стороне я не мог просто использовать ширину, мне пришлось также поиграть с полем, так что это выглядит так: 

$('.therapietown').hover(function(){
    $('.therapiepath').animate({width: '903px'}, {queue: false}).animate({marginLeft: '97px'}, {queue: false});
},function(){
    $('.therapiepath').animate({width: '0px'}, {queue: false}).animate({marginLeft: '1000px'}, {queue: false});
});

это делает все, что я хочу, кроме создания полосы прокрутки ... Вот соответствующий CSS: 

.path {
    position: absolute;
    border: 0px;
}

.therapiepath {
    width: 0px;
    height: 83px;
    z-index: 10;
    top: 130px;
    left: 50%;
    margin-left: 1000px;
    background-image:url('bin/therapiepath.png'); 
    background-position:right top;
}

Так что вы можете увидеть это в прямом эфире здесь: http://joon.be/dalida/

Ответы [ 4 ]

1 голос
/ 03 августа 2011

Разница в том, что браузер не будет прокручивать дальше влево, чем 0. Справа страница может расширяться настолько, насколько это необходимо.Вы можете исправить это, установив overflow: hidden, хотя это может привести к другим проблемам, в зависимости от вашей страницы.

0 голосов
/ 03 августа 2011

idk, но body{overflow: hidden} сделает трюк для появления полос прокрутки.Однако я бы посоветовал против этого и вместо этого создал бы обертку шириной 100%.затем примените к нему свойство переполнения.

0 голосов
/ 03 августа 2011

Полоса прокрутки у меня не появилась, но вы можете сделать это на body или html, добавить свойство overflow-y со значением hidden, и это позволит убедиться, что полоса прокруткине отображается.

Обновление: Если вы беспокоитесь о поддержке IE, возможно, вы захотите просто использовать overflow:hidden; в зависимости от того, насколько вы хотите поддерживать переменную ширину окна.

0 голосов
/ 03 августа 2011

Простой ответ, для анимации на левой стороне достаточно экрана, чтобы не требовалась полоса прокрутки. Ваше решение, скорее всего, будет CSS:

Попробуйте добавить overflow-x:hidden; к телу

...