Полосы прокрутки на CSS блоков - PullRequest
Новая
       5

Полосы прокрутки на CSS блоков

0 голосов
/ 26 мая 2020

Я новичок в CSS. У меня есть некоторые пожелания по поводу полос прокрутки.

В моем примере (см. Код ниже) у меня есть два независимых блока рядом. Считайте прямоугольники изображениями.

Пока что у меня есть:

У меня есть вертикальная полоса прокрутки для левых розовых прямоугольников в блоке («навигация») .

У меня есть горизонтальная полоса прокрутки в нижней части окна страницы (что хорошо) для большого голубого прямоугольника в блоке («содержимое»). Но он не работает хорошо, не может прокручиваться вправо от голубого изображения.

Проверено в Chrome и IE.

Вот изображение страницы html в http://arxfoto.se/ScrollbarTest.html (см. http://arxfoto.se/scrollbartest.jpg).

Я хотел бы иметь горизонтальную полосу прокрутки для левый розовый блок «навигации» в нижней части окна страницы.

Я хотел бы иметь вертикальную полосу прокрутки для голубого блока «содержимого» на правом краю страницы окно. Хм, я только что заметил, что колесико прокрутки мыши выполняет эту вертикальную прокрутку! Но это немного скрыто ..?

Я бы хотел иметь лучшую горизонтальную полосу прокрутки для блока «содержимого».

.

Это вообще возможно в CSS?

.

Любая помощь очень ценится !!

.

Код (см. http://arxfoto.se/ScrollbarTest.html): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Scrollbar test</title>
<style type="text/css">
    body {
        font-family:Arial, Helvetica, sans-serif;
        margin:0;
        padding:0 10px 0 10px;
        height:100%;
        overflow: auto;
    }

    #content {
        margin:0px 0px 0px 210px;
        display:block;
        background:white;
        height: 100%;
        width: 100%;
        border:1px solid #888;
        position:fixed;
        overflow: auto;
    }

    #navigation {
        margin: 0px 0px 0px 10px;
        display:block;
        background:lightgrey;
        padding: 10px;
        padding-right: 25px;
        top:0px;
        left:0px;
        width:170px;
        height: 100%;
        border:1px solid #888;
        position:fixed; 
        overflow: auto;
    }

* html #content {position:absolute;}
</style>
</head>

<body>
<div id="navigation">
<div style="width:170px;height:100px;border:1px solid #000;background:pink;">
&nbsp;&nbsp;Vertical scrollbar!<br>&nbsp;&nbsp;Wanted:<br>&nbsp;&nbsp;Horizontal scrollbar
<br>&nbsp;&nbsp;at the bottom<br>&nbsp;&nbsp;of browser window</div><br>
<div style="width:250px;height:100px;border:1px solid #000;background:pink;"><br>
&nbsp;&nbsp;A wider image.</div><br>
<div style="width:170px;height:100px;border:1px solid #000;background:pink;"></div><br>
<div style="width:170px;height:100px;border:1px solid #000;background:pink;"></div><br>
<div style="width:170px;height:100px;border:1px solid #000;background:pink;"></div><br>
<div style="width:170px;height:100px;border:1px solid #000;background:pink;"></div><br>
<div style="width:170px;height:100px;border:1px solid #000;background:pink;"></div><br>
<div style="width:170px;height:100px;border:1px solid #000;background:pink;"></div><br>
<div style="width:170px;height:100px;border:1px solid #000;background:pink;"></div><br>
<div style="width:170px;height:100px;border:1px solid #000;background:pink;">
<br>&nbsp;&nbsp;Last image.</div><br>
</div>

<div id="content">
<div style="width:1500px;height:1000px;border:1px solid #000;background:cyan;">
<br>&nbsp;&nbsp;&nbsp;This is a large image.
<br>&nbsp;&nbsp;&nbsp;Wanted:
<br>&nbsp;&nbsp;&nbsp;Vertical and (better) horizontal scrollbar for this block, 
on the edges of the browser window.
<br><br>
<h1>
&nbsp;&nbsp;&nbsp;&nbsp;
1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
5&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
6&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
7&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
8&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
9&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
10
</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br<br><br><br><br><br><br>
<br><br<br><br><br><br><br><br><br><br><br<br><br><br><br><br><br><br><br><br<br><br><br><br><br>
<h1>&nbsp;&nbsp;&nbsp;Bottom of image</h1>
</div>

</body>
</html>

1 Ответ

0 голосов
/ 26 мая 2020

Вам нужно добавить атрибут переполнения к обоим div следующим образом: 

<style type="text/css">
    body {
        font-family:Arial, Helvetica, sans-serif;
        margin:0;
        padding:0;
        height: 100vh
    }
    #navigation {
        margin: 0px 0px 0px 0px;
        background:lightgrey;
        width:25%;
        height: 100%;
        float: left;
        border:1px solid #888;
        overflow-x: scroll;
        overflow-y: scroll;
    }
    #content {
        margin:0px 0px 0px 0px;
        background:white;
        width: 74%;
        height: 100%;
        float: left;
        border:1px solid #888;
        overflow-x: scroll;
        overflow-y: scroll;
    }
    ::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 10px;
    }
    ::-webkit-scrollbar-thumb {
      background-color: rgba(0,0,0,.6);
      -webkit-box-shadow: 0 0 1px rgba(255,255,255,0.6);
    }
</style>

Ссылка для HTML Page - https://68wgy.csb.app/

...