Dodanie scrolla do okna CSS

pytanie zadane 22 lipca 2017 w HTML i CSS przez Vorex444 Dyskutant (9,610 p.)

Cześć, chce zrobić coś takiego jak na tej stronie https://www.o2.pl/ kliknijcie na pierwszy jakiś artykuł i on wam się otworzy w okienku na stronie. Coś takiego już mi się udało zrobić, ale na tej stronie dzieje się coś takiego, że gdy otworzy się ten artykuł, pasek przesuwania głównej strony znika, a można tylko przesuwać to co znajduje się w artykule.

U mnie coś nie chce działać, moje okienko jest position:fixed; jak coś. Mimo, że dla mojego okienka dałem overflow:scroll to i tak przewijanie paska nie działa, przewija się to co jest pod nim czyli strona główna. Wiece o co mi chodzi czy jeszcze inaczej to napisać? :D Dzięki za wszelką pomoc!

.open-news
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    min-height: 100%;
    max-height: 100%;
    min-width: 100%;
    background-color: #FFFFFF;
    z-index: 9999;
    cursor: default;
    display: none;
    overflow-y: scroll;
}

komentarz 22 lipca 2017 przez ScriptyChris Mędrzec (190,190 p.)

Dlaczego powielasz swój temat?

Nadal nie pokazałeś całego kodu, gdyż brakuje HTML.

komentarz 22 lipca 2017 przez Vorex444 Dyskutant (9,610 p.)

<div id="open-news" class="open-news"><button name="close-news"></button>
             <h1>TYTUL ARTYKULU!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam finibus mauris eget diam facilisis, sed ultrices sem pulvinar. Sed sit amet nunc vehicula, scelerisque est quis, semper orci. Suspendisse potenti. Suspendisse potenti. Donec accumsan justo at scelerisque aliquet. Nullam vitae convallis ex, ac commodo lectus. Etiam eget nisl lectus. Fusce erat lacus, rhoncus sed aliquet a, dignissim accumsan dui. Suspendisse dapibus magna eros, ut iaculis felis iaculis id. Vivamus vestibulum lobortis quam, ut auctor odio hendrerit non. Cras hendrerit felis eu suscipit mattis.
            <br><br><br>
        Vestibulum mi quam, ullamcorper blandit consectetur id, bibendum nec nibh. Nam porta elementum arcu, feugiat sagittis lorem pellentesque nec. Proin sed mauris id mi volutpat laoreet at eget ligula. Etiam lacus felis, elementum id urna id, ornare scelerisque nibh. Aliquam erat volutpat. Fusce id nulla dignissim, eleifend nisl non, ultrices nibh. Duis eu vestibulum ipsum. Nam elementum nisl tellus, at consectetur nibh hendrerit nec. Etiam placerat ligula a ligula eleifend, eget accumsan tellus congue. Quisque sagittis eros sed nulla ultricies, quis molestie ante condimentum. Nam convallis lectus nec enim aliquam imperdiet. Morbi pretium in nunc quis fringilla. Nam orci nulla, dignissim a sem sit amet, suscipit ornare neque.
            <br><br><br>
        Curabitur in sem aliquam sem laoreet volutpat ac sed mauris. Nunc mauris erat, tempor sit amet lectus sed, aliquet rhoncus orci. Ut quis mi a leo accumsan vulputate a in turpis. Phasellus tortor massa, condimentum nec porta id, mollis ac risus. Integer luctus diam tellus. Quisque a velit in nisi mattis pharetra et sit amet erat. Nullam in placerat risus. Etiam bibendum, massa eu viverra mollis, arcu sem sollicitudin justo, in faucibus nunc purus ut ligula.</p>
    </div>

.open-news
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    min-height: 100%;
    max-height: 100%;
    min-width: 100%;
    background-color: #FFFFFF;
    z-index: 9999;
    cursor: default;
    display: none;
}

okej, prosze to html i css

1 odpowiedź

odpowiedź 22 lipca 2017 przez Kamil Łydka Stary wyjadacz (13,600 p.)

W ten twój div .open-news wrzuć nowy div treścią ustalony z szerokością np. 50% i wtedy ten: overflow-y: scroll; będzie Ci działał dla treści, która jest w tym nowym divie.

Ogólnie ciężko coś więcej napisać, bo dałeś zbyt mało kodu.

komentarz 22 lipca 2017 przez Vorex444 Dyskutant (9,610 p.)

Kodzik, który przesłałem to całość kodu tego okienka, który w tej chwili posiadam w CSS'ie :D

komentarz 22 lipca 2017 przez Kamil Łydka Stary wyjadacz (13,600 p.)

zrobiłeś tak jak Ci napisałem?

Zresztą nie wiem czemu na zdjęciu jest: "ten scroll chcę ukryć". Na o2 żadnego scrollu nie ukryli, jedynie obszar wyświetlania treści zmniejszyli i nadali prawdopodobnie z-index.

komentarz 22 lipca 2017 przez Vorex444 Dyskutant (9,610 p.)

Za chwilę zrobię to co mi napisałeś, sekundę :D

komentarz 22 lipca 2017 przez Vorex444 Dyskutant (9,610 p.)

Nie działa w ten sposób co napisałeś

komentarz 22 lipca 2017 przez Kamil Łydka Stary wyjadacz (13,600 p.)

Chyba się nie rozumiemy... O2 nie ma żadnego scrolla w tym miejscu.

Jeśli chcesz, żeby działał scroll w miejscu, w którym zaznaczyłeś strzałkę, to po prostu zmniejsz wysokość tego diva.

Zrobiłem CI na szybko, ale to jest tak jak dałeś na zdjęciu, a nie jak ma O2:

https://codepen.io/PanLydka/pen/KvPBgv