Определить, есть ли у элемента скролл и отнять его ширину

Question

Есть у меня один довольно интересный элемент дизайна/верстки, где используется этот скрипт:

$('.content').append('<div class="scroll-hover" data-direction="left" data-amount="50"></div><div class="scroll-hover" data-direction="left" data-amount="10"></div><div class="scroll-hover" data-direction="right" data-amount="10"></div><div class="scroll-hover" data-direction="right" data-amount="50"></div>');
var direction = 'left',
  amount = '+=10';

function scroll() {
  $('.content').animate({
    scrollLeft: amount
  }, 100, 'linear', function() {
    amount && scroll();
  });
}
$('.scroll-hover').hover(function() {
  direction = $(this).data('direction');
  amount = $(this).data('amount');
  direction === 'right' ? amount = '+=' + amount : amount = '-=' + amount;
  scroll();
}, function() {
  amount = '';
});

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.wrapper {
  width: 100%;
  height: 100vh;
}

.wrp {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  height: 100vh;
}

.content {
  position: relative;
  overflow-y: hidden;
  overflow-x: hidden;
  white-space: nowrap;
  width: 100%;
}

#content {
  white-space: nowrap;
}

.story {
    display: inline-block;
    width: 100%;
    height: 300px;
    border: 1px solid black;
}

.scroll-hover {display: block; position: fixed; top: 0; width: 5vw; height: 300px; opacity: 0.5;}

.scroll-hover:hover {opacity: 1;}

.scroll-hover[data-direction="left"][data-amount="10"] {left: 5vw; background: orange;}
.scroll-hover[data-direction="left"][data-amount="50"] {left: 0; background: orangered;}
.scroll-hover[data-direction="right"][data-amount="10"] {right: 5vw; background: orange;}
.scroll-hover[data-direction="right"][data-amount="50"] {right: 0; background: orangered;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="wrp">
    <div class="container">
      <div class="content">
        <div id="content">
<div class="story"></div>
<div class="story"></div>
<div class="story"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Он добавляет элементы, при наведении на которые дает возможность прокрутки некого блока .wrp по вертикали, который является родителем, так сказать, в третьем поколении этих элементов. Это не .content, который указан в скрипте, а родитель еще выше по ветке.

Такой вопрос: возможно ли как-то определить такое условие, что в случае если, например, у некого элемента/блока .wrp есть вертикальный скролл, то высчитывать ширину скролла и для:

<div class="scroll-hover" data-direction="right" data-amount="50"></div> - указывать css стиль right: ширина скролла;

<div class="scroll-hover" data-direction="right" data-amount="10"></div> - указывать css стиль right: ширина скролла + 5vw

Не знаю, будет ли понятен мой вопрос или нет. Если нет, тогда буду как-то добавлять сюда минимальный воспроизводимый пример. Поэтому прошу вопрос не минусовать. Благодарю!

upd. Добавил минимальный воспроизводимый пример. На весь экран естественно скролла нет, но если же смотреть в маленьком окне, то справа появляется скролл и видно, что он перекрывается.

Answer 1

elem.clientWidth — внутренняя ширина элемента, без учета скролла, включая padding, но не бордеры. elem.offsetWidth — внешняя ширина, включая бордеры (из-за которых может возникнуть лишнее смещение, осторожно с этим).

*Ну я на всякий случай не тронул HTML, по условию. А HTML-строку из append тоже нельзя менять? Добавил бы туда класс-метку, вместо километрового селектора)

$('.content').append(
  '<div class="scroll-hover" data-direction="left" data-amount="50"></div>' +
  '<div class="scroll-hover" data-direction="left" data-amount="10"></div>' +
  '<div class="scroll-hover" data-direction="right" data-amount="10"></div>' + 
  '<div class="scroll-hover" data-direction="right" data-amount="50"></div>'
);

window.addEventListener("resize", bubu);
bubu();
function bubu() {
  var wrp = document.querySelector(".wrp");
  var inner = wrp.clientWidth;
  var outer = wrp.offsetWidth;
  // У jQuery тоже должно быть что-то подобное.
  
  $('.scroll-hover[data-direction="right"][data-amount="10"]').css({
    right: "calc(" + (outer - inner) + "px + 5vw)"
  });
  $('.scroll-hover[data-direction="right"][data-amount="50"]').css({
    right: (outer - inner) + "px"
  });
}

/***/

var direction = "left";
var amount = "+=10";

function scroll() {
  $('.content').animate({
    scrollLeft: amount
  }, 100, 'linear', function() {
    amount && scroll();
  });
}
$('.scroll-hover').hover(
  function() {
    direction = $(this).data('direction');
    amount = $(this).data('amount');
    amount = (direction === "right" ? "+=" : "-=") + amount;
    
    scroll();
  }, 
  function() {
    amount = '';
  }
);

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.wrapper {
  width: 100%;
  height: 100vh;
}

.wrp {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  height: 100vh;
}

.content {
  position: relative;
  overflow-y: hidden;
  overflow-x: hidden;
  white-space: nowrap;
  width: 100%;
}

#content {
  white-space: nowrap;
}

.story {
  display: inline-block;
  width: 100%;
  height: 300px;
  border: 1px solid black;
}

.scroll-hover {
  display: block;
  position: fixed;
  top: 0;
  width: 5vw;
  height: 300px;
  opacity: 0.5;
}

.scroll-hover:hover {
  opacity: 1;
}

.scroll-hover[data-direction="left"][data-amount="10"] {
  left: 5vw;
  background: orange;
}

.scroll-hover[data-direction="left"][data-amount="50"] {
  left: 0;
  background: orangered;
}

.scroll-hover[data-direction="right"][data-amount="10"] {
  right: 5vw;
  background: orange;
}

.scroll-hover[data-direction="right"][data-amount="50"] {
  right: 0;
  background: orangered;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="wrp">
    <div class="container">
      <div class="content">
        <div id="content">
          <div class="story"></div>
          <div class="story"></div>
          <div class="story"></div>
        </div>
      </div>
    </div>
  </div>
</div>

P.s. amount = (direction === "right" ? "+=" : "-=") + amount; - заменил строчку...

БЛОГ НА HUSL

Определить, есть ли у элемента скролл и отнять его ширину

Ответы (1 шт):