Как нажимать элемент за пределы экрана без браузера, просто расширяя область просмотра?

Когда-то было приятно сгладить вещи из окна просмотра, чтобы скрыть их, например, при создании скрытых боковых панелей или панелей. Но когда я нажимаю что-то мимо правого или нижнего края окна, браузер (Chrome в моем случае) автоматически добавляет к нему полосы прокрутки. Теперь пользователь может перейти к элементу, который я пытался скрыть. (Пример JSFiddle)

Я могу удалить полосы прокрутки, установив overflow-x: hidden в элемент body, но это открывает кучу других побочных эффектов. Например, пользователь все еще может случайно нажать и протащить их за край экрана. Теперь пользователь видит "скрытый" элемент и может также застревать, если они не знают, как работают браузеры. (Пример JSFiddle)

Как я могу добиться этого эффекта "исчезнуть с экрана", не испытывая этих недостатков?

Ответ 1

Лучший способ решить эту проблему - разместить элемент внутри невидимой обертки того же размера. Обертка должна иметь overflow: hidden, и элемент должен быть вытолкнут за пределы обертки, а не за пределами края <body>.

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

Обертка также должна быть уменьшена до 0, чтобы она не была невидимой поверх документа и, возможно, захватила клики, которые не были предназначены для нее.

Здесь пример решения на практике. Я использовал jQuery для управления CSS, но любая библиотека JavaScript (или ни одна) будет делать трюк. Обратите внимание, что div "clicker" не будет доступен, если оболочка боковой панели не будет уменьшена.

$('.sidebar-inner').on('click', function() {
    $(this).css('right', -250);
    $(this).closest('.sidebar-outer').css('width', 0);
});

$('.clicker').on('click', function() {
    alert('CLICKED!');
});

body
{
    background-color: red;
    font: 12pt sans-serif;
}

.sidebar-outer
{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 250px;
    
    -webkit-transition: width 0.2s ease-out;
    -moz-transition: width 0.2s ease-out;
    transition: width 0.2s ease-out;
    
    overflow: hidden;
    z-index: 999;
}

.sidebar-inner
{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 250px;
    padding: 10px;
    box-sizing: border-box;
    
    -webkit-transition: right 0.2s ease-out;
    -moz-transition: right 0.2s ease-out;
    transition: right 0.2s ease-out;
    
    background-color: cornflowerblue;
    cursor: pointer;
}

.clicker
{
    position: absolute;
    width: 50px;
    height: 50px;
    top: 10px;
    right: 10px;
    padding: 10px;
    
    background-color: green;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="sidebar-outer">
    <div class="sidebar-inner">
        Click to hide
    </div>
</div>

<div class="clicker">Click me!!</div>

Ответ 2

Простым решением (по общему признанию, не всегда жизнеспособным) было бы установить position:fixed на боковой панели вместо position:absolute.

FIDDLE

$('.sidebar').on('click', function() {
  $(this).css('right', -250);
});

.sidebar {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  width: 250px;
  -webkit-transition: right 0.2s ease-out;
  -moz-transition: right 0.2s ease-out;
  transition: right 0.2s ease-out;
  cursor: pointer;
  background-color: cornflowerblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
  Click to hide
</div>

Ответ 3

Это плохая идея обернуть что-то невидимое, потому что вы должны знать, почему ваш движок будет перемещен за пределы экрана, это не просто для скрытых, если только для скрытых будет много хороших способов сделать. Чтобы перейти за пределы экрана, наибольшее преимущество - когда вы работаете с большим изображением, видео или другим компонентом, таким как News Feed в iframe. Это обеспечит кэш-рендеринг для него, значительно улучшит его эффективность.