Widoczne przepełnienie w jednym kierunku z przewijaniem w innym kierunku

Question

Potrzebuję absolutnie pozycjonowanego elementu, który przewija się wraz z rodzica. Element pozycjonowany absolutnie może być szerszy niż przewijany kontener, w którym to przypadku treść jest obecnie obcięta. Wygląda na to, że łączenie overflow-y: auto; i nie działa.

Oto JSFiddle, aby zilustrować problem. Zauważ, że wyskakujące okienka powodują przewijanie w poziomie.

I tak powinno wyglądać here, tylko z przewijaniem.

Czy można tego dokonać za pomocą CSS?

Answer 1

Masz sztywno zakodowaną szerokość. <div> automatycznie wykona całą szerokość strony, więc chcesz zrobić, to ograniczyć maksymalną szerokość div mogą zawierać tak zmienić width: 400px coś jak max-width: 90%

Oto JSFiddle przykład: http://jsfiddle.net/c8DdL/3/

Answer 2

Dla potomności: Problem wymaga rozwiązania JavaScript. Ostatecznie funkcja projektu, nad którą pracowałem została zmieniona, aby uniknąć tego problemu i zaowocowała lepszym projektem.

Answer 3

wykorzystanie max_width zamiast width 400. To jest jedyne rozwiązanie.

Answer 4

Znalazłem rozwiązanie w moim projekcie, ukrywając poziomy pasek przewijania (używam niestandardowego paska przewijania ui), nadając kontenerowi prawo do wypełnienia o wartości 300 pikseli i prawo-margines o wartości -300 pikseli. Wypełnienie i -margin sprawiają, że normalne dzieci są wyrównane tak samo, z wyjątkiem tego, że w pojemniku znajduje się dodatkowe miejsce na wypadek, gdyby element z absolutnie pozycją rozciągał się poza tą strefą. (obszary przewijane oddzielają wszystko poza zewnętrznymi granicami)

Oczywiście, jeśli zawartość znajduje się po prawej stronie obszaru przewijania, powoduje to, że rozszerza się na nią. Przezroczyste tło, które nie stanowi problemu wizualnego; jednak blokuje zdarzenia myszy.

Aby rozwiązać ten dodałem dwa elementy jak rodzeństwem z przewijania widoku, tak jak poniżej:

// this outer container resizes to match the size of scrollContainer 
<div style={{position: "relative"}> 
    <div id="scrollContainer" style={{paddingRight: 300, marginRight: -300}}> 
     // stuff which might extend to the right 
    </div> 

    // the containers below resize with the outer container 
    // however, notice that the 2nd one is positioned only over the possibly-extended-onto area 

    <div id="insideArea" style={{position: "absolute", left: 0, right: 0, top: 0, bottom: 0}} 
     onMouseEnter={()=> { 
      // we're back inside, so enable scroll-container mouse-events 
      $("scrollContainer").css("pointer-events", "auto"); 

      // prevent self from blocking mouse events for scrollContainer 
      $("insideArea").css("display", "none"); 

      // re-enable extend-area div, so we know when mouse moves over it 
      $("extendArea").css("display", "block"); 
     }/> 

    <div id="extendArea" style={{position: "absolute", top: 0, bottom: 0, left: "100%", width: 300}} 
     onMouseEnter={()=> { 
      // we're over the extend-area, so disable scroll-container mouse events 
      $("scrollContainer").css("pointer-events", "none"); 

      // prevent self from blocking mouse events for behind-extend-area elements 
      $("#extendArea").css("display", "none"); 

      // re-enable inside-area div, so we know when mouse moves over it 
      $("#insideArea").css("display", "block"); 
     }/> 

Czego powyżej zrobić? Powoduje to, że gdy mysz znajdzie się w normalnym obszarze przewijania, włączane są zdarzenia pointeru, pozwalając na klikanie w środku - ale kiedy mysz przenosi się do specjalnego "rozszerzonego" obszaru, zdarzenia myszy z przewijaniem są wyłączone, umożliwiając klikanie normalnych pozycji za tym obszarem.

To rozwiązanie prawdopodobnie nigdy nie będzie używane przez nikogo innego, ale poświęciłem wystarczająco dużo czasu na jego znalezienie. Myślałem, że i tak go udostępnię!