CSS вертикально изменять размер и положение ScrollBar

У меня есть изображение с интервалами на верхней и нижней, обернутую с прокруткой DIV как так:CSS вертикально изменять размер и положение ScrollBar

<div class="scroller"> 
    ::before 
    <img source="blah"></img> 
    ::after 
</div>

Однако полоса прокрутки начинается на самом верху и заканчивается на очень низ. Моя цель - сделать начальную полосу прокрутки на той же высоте, что и изображение при полной прокрутке, и остановиться в конце изображения.

Оранжевая область представляет изображение.

Как это выглядит сейчас:

это то, что я хочу, чтобы это выглядело как:

Я попытался обертывание изображения в другой DIV и делаю, что DIV, который имеет полосу прокрутки, но это не сработает, потому что тогда, когда вы прокручиваете изображение, изображение не будет выходить за пределы полосы прокрутки. Эти районы не будут видны больше:

Heres a demo

PS Это нужно только работать в хроме, если это делает его легче :)

редактировать: Следующий GIF визуализирует почему окружив его не является вариант, верхняя и нижняя части (отмечены красным цветом на третьем изображении) никогда не будут видны:

источник

2016-07-14 L0laapk3

Что-то вроде этого? : http://jsbin.com/puvonovafa/edit?html,css,output

.header, 
 
.footer { 
 
    width: 100vw; 
 
    height: 10vh; 
 
    background-color: yellow; 
 
    position: fixed; 
 
} 
 
body { 
 
    margin: 0 
 
} 
 
div.content { 
 
    width: 100vw; 
 
    background-color: orange; 
 
    height: 80vh; 
 
    top: 10vh; 
 
    position: fixed; 
 
    overflow-y: scroll; 
 
    overflow-x: hidden; 
 
} 
 
.footer { 
 
    bottom: 0 
 
} 
 
div.scrollMe { 
 
    height: 100vh;width:100vw; 
 
    background-color: red; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 
    <div class="header"> 
 

 
    </div> 
 
    <div class="content"> 
 
    <div class="scrollMe">test </div> 
 
    
 
    </div> 
 
    
 
    <div class="footer"> 
 

 
    </div> 
 
</body> 
 

 
</html>

источник

2016-07-14 21:04:35

Я редактировал вопрос, чтобы показать последнее изображение в качестве изображения, а не как ссылки, я надеюсь, что это больше Теперь ясно. – L0laapk3

Что об этом?

HTML:

<div class="container"> 
    <div class="scroller"> 
     <img class="image"> 
    </div> 
</div>

CSS:

.scroller{ 
    height: 300px; 
    background-color: orange; 
    overflow-y: scroll; 
} 

.container:before, 
.container:after { 
    content: ""; 
    display: block; 
    width: 100%; 
    height: 10px; 
    background-color: yellow; 
} 

.image{ 
    height: 500px; 
}

https://jsfiddle.net/ttaxofa3/2/

источник

2016-07-14 21:16:52 mxlse

Я отредактировал вопрос, чтобы показать последнее изображение как изображение, а не как ссылку. Надеюсь, теперь это станет более ясным. – L0laapk3

CSS вертикально изменять размер и положение ScrollBar

ответ

Смежные вопросы