Korzystanie z przelewu-y: ukryty lub przepełniony-x: ukryty, aby ukryć tylko jedną stronę elementu

Question

Tytuł prawie zadaje pytanie, ale wiem, że używając overflow-y: hidden i overflow-x: hidden możesz ukryć górny i dolny lub lewy i jeździć stronie elementu, ale czy istnieje sposób, aby ukryć tylko jedną stronę za pomocą tych selektorów.

W szczególności jestem zainteresowany ukrywaniem dna elementu div, który jest przepełniony, ale nie jest górą.

Jeśli nie, jest jakiś inny sposób CSS, aby osiągnąć ten pożądany efekt?

Istnieje uzasadniony cel, aby tego potrzebować i chciałbym sprawdzić, czy istnieje standardowy sposób robienia tego.

Aby wyjaśnić nieco, jestem tylko pod kontrolą CSS dla pokazu slajdów i muszę pchnąć element wewnątrz slajdów div się powyżej div jednak wartości overflow: hidden są odcinając tym podskoczyły div kiedy to zrobić. Mogę oczywiście całkowicie usunąć overflow: hidden, ale to nie pomoże w bardzo dobrym pokazie slajdów!

ryba znajduje się poniżej:

https://jsfiddle.net/ejhyz7t3/

Answer 1

poniżej jsfiddle przeliczeniu na przykład w kwestii zapewnia pożądany efekt odcinania tylko dolnej krawędzi za pomocą clip:

https://jsfiddle.net/ejhyz7t3/2/

pełny kod jest przytoczone poniżej w odniesieniu:

HTML

<div class="outer-container"> 
    <div class="inner-container"> 
    </div> 
</div> 

CSS

.outer-container { 
    background: red; 
    height: 100px; 
    margin-top: 100px; 
    width: 150px; 
    padding-left: 50px; 
} 

.inner-container { 
    background: green; 
    height: 200px; 
    width: 100px; 
    transform: translateY(-50px); 
    position: absolute; 
    clip: rect(0, 100px, 150px, 0); 
} 

Answer 2

Miałem podobny problem, gdzie miałem Draggable div że chciałem przelewać w prawo/w dół, ale nie do góry/w lewo. Rozwiązałem go, dostosowując indeks Z. Kontener div do z-index: 0px; przeciągalny do z-index: 500px; i divs w górnym i lewym (menu) do z-index: 1000px ;. Skutecznie nakładało się na warstwę, którą można przeciągnąć, pozwalając na przepełnienie we wskazanych kierunkach.

Answer 3

.mydiv { 
    clip: rect(-100px, -100px, auto, -100px); 
} 

Ustawianie dolną część klipu rect do auto klipów jak overflow: hidden miałby. Wartości -100px są dowolnie wybierane, aby zostawić miejsce na przepełnienie.