3

Есть проблема, не могу найти решения.
Есть блок, у него внутренняя тень. Что бы тень накладывалась на элементы приходиться ставить отрицательный z-index.

.content {
  height: 140px;
  overflow-x: auto;
  white-space: nowrap;
  overflow-y: hidden;
  padding: 20px 10px 10px 10px;
  box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, 1);
  backgound-color: yellow;
  border: 1px solid black;
  width: 300px;
}

.item {
  height: 100px;
  width: 100px;
  background-color: yellow;
  display: inline-block;
  cursor: pointer;
  z-index: -1;
  position: relative;
}

.item:hover {
  background-color: red;
}
<div class="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Но тогда перестаёт работать hover.

Убираю отрицательный z-index. Тень на падает на элементы внутри блока.

.content {
  height: 140px;
  overflow-x: auto;
  white-space: nowrap;
  overflow-y: hidden;
  padding: 20px 10px 10px 10px;
  box-shadow: inset 0px 0px 15px 10px rgba(0,0,0,1);
  backgound-color: yellow;
  border: 1px solid black;
  width: 300px;
}
.item{
  height: 100px;
  width: 100px;
  background-color: yellow;
  display: inline-block;
  cursor: pointer;
}
.item:hover{
  background-color: red;
}
<div class="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

4
  • Так и что в итоге получится должно? Тень должна быть поверх блоков, но при этом они должны быть кликабельны?
    – Cheg
    Commented 10 сент. 2017 в 19:22
  • Чот не могу придумать вариант без js'a .... ну точнее вариант есть, но поддержка ie11+ Commented 10 сент. 2017 в 19:30
  • Если бы не этот скролл...
    – Cheg
    Commented 10 сент. 2017 в 19:37
  • Да, должно получиться тень на элементах и рабочий hover. MedvedevDev, а что с js ? Commented 10 сент. 2017 в 21:27

2 ответа 2

2

Быть может такой вариант подойдет. Правда скролл получается внутри.

.content {
  padding: 20px 10px 0 10px;
  width: 300px;
  height: auto;
  box-sizing: border-box;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
.item{
  height: 100px;
  width: 100px;
  background-color: yellow;
  display: inline-block;
  cursor: pointer;
  position: relative;
}
.item:hover{
  background-color: red;
}
.wrapper {
  border: 1px solid black;
  box-sizing: border-box;
  width: 300px;
  overflow: hidden;
  position: relative;
  padding-bottom: 20px;
}
.shadow-top, .shadow-right, .shadow-bottom, .shadow-left {
  box-shadow: 0 0 15px 10px rgba(0,0,0,1);
  position: absolute;
}
.shadow-right, .shadow-left {
  height: 100%;
  width: 0;
  top: 0;
}
.shadow-top, .shadow-bottom {
  width: 300px;
  height: 0;
  left: 0;
}
.shadow-top {
  top: 0;
}
.shadow-right {
  right: 0;
}
.shadow-bottom {
  bottom: 0;
}
.shadow-left {
  left: 0;
}
<div class="wrapper">
  <div class="content">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="shadow-top"></div>
  <div class="shadow-left"></div>
  <div class="shadow-right"></div>
  <div class="shadow-bottom"></div>
</div>

Вариант с JS (jQuery). Если стилей много, то лучше менять класс, а не стили.

var items = [];

getItemsPos();

function getItemsPos() {
    $('.item', '.content').each(function(index) {
        var offset = $(this).offset();
        items[index] = {
            'minX': offset.left,
            'minY': offset.top,
            'maxX': offset.left + $(this).width() - 1,
            'maxY': offset.top + $(this).height() - 1,
        };
    });
};

function itemHover(index) {
    var cX = event.pageX,
        cY = event.pageY;

    return (cY <= items[index].maxY && cY >= items[index].minY) && (cX <= items[index].maxX && cX >= items[index].minX);
}

$('.content').mousemove(function(e) {
    $('.item', $(this)).css('background-color', 'yellow');
    $(this).css('cursor', 'default');

    for (i = 0; i < items.length; i++) {
        if (itemHover(i) === true) {
            $('.item', $(this)).eq(i).css('background-color', 'red');
            $(this).css('cursor', 'pointer');
        }
    }
});

$('.content').mouseout(function(e) {
    $('.item', $(this)).css('background-color', 'yellow');
    $(this).css('cursor', 'default');
});

$('.content').scroll(function(e) {
    getItemsPos();
});
1
  • Спасибо. Хотя вариант с множеством дополнительных элементов... С другой стороны, для достижения нужного результата достаточно двух лишних элементов. Лево, право. Commented 11 сент. 2017 в 1:59
2

С помощью javascript и pointer-events:none; это можно сделать так:

shadowHeight();
window.addEventListener('resize', function() { // на случай, если при адаптиве высота блока будет меняться
  shadowHeight();
});

function shadowHeight() {
  var block = document.getElementsByClassName('inner')[0];
  var shadow = document.getElementsByClassName('shadow')[0];
  shadow.style.height = block.clientHeight + 'px'; // устанавливаем тени высоту, равную внутреннему контенту
}
.content {
  width: 300px;
  position: relative;
}

.inner {
  padding: 20px 10px;
  overflow-x: auto;
  white-space: nowrap;
  overflow-y: hidden;
  border: 1px solid black;
  position: relative;
}

.shadow {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, 1);
  pointer-events: none;
}

.item {
  height: 100px;
  width: 100px;
  background-color: yellow;
  display: inline-block;
  cursor: pointer;
}

.item:hover {
  background-color: red;
}
<div class="content">
  <div class="inner">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="shadow"></div>
</div>

Если же прокрутки внутри блока нет, то данная задача решается в разы проще:

.content {
  width: 318px;
  padding: 20px 10px;
  white-space: nowrap;
  border: 1px solid black;
  position: relative;
}

.content:after {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  content: '';
  box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, 1);
  pointer-events: none;
}

.item {
  height: 100px;
  width: 100px;
  background-color: yellow;
  display: inline-block;
  cursor: pointer;
}

.item:hover {
  background-color: red;
}
<div class="content">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

1
  • Спасибо. Даже есть из чего выбрать. Про pointer-events: none; забыл однако. Commented 11 сент. 2017 в 1:52

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.