Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   внутренний Scroll + Position:fixed - тупик (https://javascript.ru/forum/dom-window/78415-vnutrennijj-scroll-position-fixed-tupik.html)

oleg901 10.09.2019 21:02
внутренний Scroll + Position:fixed - тупик
 
Доброго времени суток, есть такой разметка 
<div class="sidebar">
  
    <div id="scrollable">
    <div id="fixed">
        position:fixed        
    </div>
        Scrolling content<br><br><br>
        Так уж выходит, что общий скролл страницы задается вложенным слоем и в тоже время внутри слоя со скроллом находится фиксированный слой прикреплённый к потолку. 
        <br><br>
        В итоге мы имеем, что фиксированный слой наезжает на скролл. Как этого можно избежать?<br><br><br>
        Так уж выходит, что общий скролл страницы задается вложенным слоем и в тоже время внутри слоя со скроллом находится фиксированный слой прикреплённый к потолку. 
        <br><br>
        В итоге мы имеем, что фиксированный слой наезжает на скролл. Как этого можно избежать?<br><br><br>
        Так уж выходит, что общий скролл страницы задается вложенным слоем и в тоже время внутри слоя со скроллом находится фиксированный слой прикреплённый к потолку. 
        <br><br>
        В итоге мы имеем, что фиксированный слой наезжает на скролл. Как этого можно избежать?<br><br><br>
        Так уж выходит, что общий скролл страницы задается вложенным слоем и в тоже время внутри слоя со скроллом находится фиксированный слой прикреплённый к потолку. 
        <br><br>
        В итоге мы имеем, что фиксированный слой наезжает на скролл. Как этого можно избежать?
        
        
    </div>
</div>




div.sidebar {
    background: #fff;
    width: 100%;
}
div#scrollable {
    overflow-y: auto;
    height: 200px;
}
div#fixed {
    background: #76a7dc;
    color: #fff;
    position:fixed;
    top:0;
    height:50px;
    width:100%;
}




Проблема заключается в том, что при наведении на область с фиксированным контентом скролл перестает реагировать. Есть какие-нибудь идеи как можно решить данную задачу? P.s Частично вопрос решается заменой fixed на sticky, но частично и не поддерживается старыми браузерами хотелось бы найти более универсальное решение. За ранее спасибо за ответ :)

ссылка на пример:
http://jsfiddle.net/8rqetnyo/

рони 10.09.2019 21:34
oleg901,
как вариант ...
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
*{
    margin: 0;
    padding: 0;
}
   div.sidebar {
    background: #fff;
    width: 100%;
}
div#scrollable {
    overflow-y: auto;
    height: 200px;
}
div#fixed {
    background: #76a7dc;
    color: #fff;
    position:fixed;
    top:0;
    height:50px;
    width:  calc(100% - 16px);
    pointer-events: none;
}



  </style>

</head>

<body>
<div class="sidebar">

    <div id="scrollable">
    <div id="fixed">
        position:fixed
    </div>
        Scrolling content<br><br><br>
        Так уж выходит, что общий скролл страницы задается вложенным слоем и в тоже время внутри слоя со скроллом находится фиксированный слой прикреплённый к потолку.
        <br><br>
        В итоге мы имеем, что фиксированный слой наезжает на скролл. Как этого можно избежать?<br><br><br>
        Так уж выходит, что общий скролл страницы задается вложенным слоем и в тоже время внутри слоя со скроллом находится фиксированный слой прикреплённый к потолку.
        <br><br>
        В итоге мы имеем, что фиксированный слой наезжает на скролл. Как этого можно избежать?<br><br><br>
        Так уж выходит, что общий скролл страницы задается вложенным слоем и в тоже время внутри слоя со скроллом находится фиксированный слой прикреплённый к потолку.
        <br><br>
        В итоге мы имеем, что фиксированный слой наезжает на скролл. Как этого можно избежать?<br><br><br>
        Так уж выходит, что общий скролл страницы задается вложенным слоем и в тоже время внутри слоя со скроллом находится фиксированный слой прикреплённый к потолку.
        <br><br>
        В итоге мы имеем, что фиксированный слой наезжает на скролл. Как этого можно избежать?


    </div>
</div>
</body>
</html>

oleg901 10.09.2019 21:50
Круто, спасибо!

Malleys 10.09.2019 23:55
Цитата:
Сообщение от oleg901
Частично вопрос решается заменой fixed на sticky
Ваш вопрос полностью решается при помощи position: sticky;, это универсальное решение, которое очень хорошо поддерживается всеми браузерами (для iOS Safari липучее позиционирование работает с префиксом position: -webkit-sticky;) https://caniuse.com/#feat=mdn-css_pr...osition_sticky

<div class="sidebar">
	<div id="scrollable">
		<div id="fixed">
			position:fixed
		</div>
		Scrolling content<br><br><br> Так уж выходит, что общий скролл страницы задается вложенным слоем и в тоже время внутри слоя со скроллом находится фиксированный слой прикреплённый к потолку.
		<br><br> В итоге мы имеем, что фиксированный слой наезжает на скролл. Как этого можно избежать?<br><br><br> Так уж выходит, что общий скролл страницы задается вложенным слоем и в тоже время внутри слоя со скроллом находится фиксированный слой прикреплённый
		к потолку.
		<br><br> В итоге мы имеем, что фиксированный слой наезжает на скролл. Как этого можно избежать?<br><br><br> Так уж выходит, что общий скролл страницы задается вложенным слоем и в тоже время внутри слоя со скроллом находится фиксированный слой прикреплённый
		к потолку.
		<br><br> В итоге мы имеем, что фиксированный слой наезжает на скролл. Как этого можно избежать?<br><br><br> Так уж выходит, что общий скролл страницы задается вложенным слоем и в тоже время внутри слоя со скроллом находится фиксированный слой прикреплённый
		к потолку.
		<br><br> В итоге мы имеем, что фиксированный слой наезжает на скролл. Как этого можно избежать?

	</div>
</div>

<style>

.sidebar {
	background: #fff;
	width: 100%;
	border: 1px solid red;
}
#scrollable {
	overflow-y: auto;
	height: 200px;
}
#fixed {
	background: #76a7dc;
	color: #fff;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	height: 50px;
	width: 100%;
}
::-webkit-scrollbar {
	width: 1em;
	background: #eee;
}
::-webkit-scrollbar-thumb {
	background: #ccc;
	border: 0.2em solid #eee;
	border-radius: 1em;
}

</style>


Цитата:
Сообщение от oleg901
не поддерживается старыми браузерами
Данный пример не ломается в старых браузерах, никто из живых людей не сидит в интернете в старых браузерах, поскольку происходит автоматическое обновление, а если кто-то и умудрился что-то запустить в старом браузере, то популярные сайты вам скажут об этом и посоветуют скачать новый браузер без проблем.

Живые люди используют в повседневной жизни Chrome (больше всего для Android, затем для компьютера), iOS Safari, в меньшей степени Firefox и Edge, в этих браузерах всё работает нормально, а остальное используют, либо боты, либо тестировщики, либо какие-то особо малочисленные и редкие люди, которые получают оргазм от просмотра поломанного YouTube!

рони, в вашем примере содержимое заезжает под область с фиксированным контентом, т. е. её не видно, а сама область с фиксированным контентом не сможет содержать элементы, на которые можно будет нажать!

рони 11.09.2019 00:43
Malleys,
ок, ваш вариант лучше.


Часовой пояс GMT +3, время: 11:03.