更改 DIV 的焦点以允许水平滚动答案

【问题标题】：Change focus of an DIV to allow horizontal scrolling更改 DIV 的焦点以允许水平滚动
【发布时间】：2019-12-28 17:21:31
【问题描述】：

我有一个大的垂直滚动元素，在其中，我有一个较小的水平滚动元素。（见sn-p）

body {
  height: 100vh;
  overflow: hidden;
}

.large {
  height: 100%;
  font-size: 32px;
  overflow-y: scroll;
}

.tall {
  height: 120%;
}

.small {
  width: 100%;
  overflow-x: scroll;
  white-space: no-wrap;
}

.wide {
  width: 120%;
}

<body>
  <div class="large">
    This is large content vertical content
    <br><hr><br>
    <div class="small">
      <div class="wide">This is smaller horizontal content</div>
    </div>
    <div class="tall"></div>
  </div>
</body>

当你悬停它时，大的垂直垂直滚动很好，但我希望你悬停水平内容时它会自动滚动，所以用户不必手动拖动滚动条来滚动。有什么方法可以用 HTML、CSS 或 JavaScript 做到这一点？

编辑

如果可能的话，我希望水平滚动由滚轮控制，而不是以一致的速度。

【问题讨论】：

标签： javascript html css

【解决方案1】：

如果您想在纯 JavaScript 中执行此操作，请在鼠标位于 .small 时逐渐调整 scrollLeft。当您离开.small 时，我还添加了一个重置功能，因为我认为它可以提供更好的用户体验。

var scrollInterval = null;

function scrollElement(ele) {
  scrollInterval = setInterval(function() {
    ele.scrollLeft += 1;
  }, 1);
}

function reset(ele) {
  clearInterval(scrollInterval);
  ele.scrollLeft = 0;
}

body {
  height: 100vh;
  overflow: hidden;
}

.large {
  height: 100%;
  font-size: 32px;
  overflow-y: scroll;
}

.tall {
  height: 120%;
}

.small {
  width: 100%;
  overflow-x: scroll;
  white-space: no-wrap;
}

.wide {
  width: 120%;
}

<div class="large">
  This is large content vertical content
  <br>
  <hr><br>
  <div class="small" onmouseenter="scrollElement(this);" onmouseleave="reset(this);">
    <div class="wide">This is smaller horizontal content</div>
  </div>
  <div class="tall"></div>
</div>

如果您希望滚动由鼠标滚轮而不是自动控制，您可以这样做：

function scrollHorizontally(e) {
  e = window.event || e;
  var delta = e.wheelDelta || -e.detail;
  document.getElementsByClassName('small')[0].scrollLeft -= delta; // Multiplied by 40
  e.preventDefault();
}

function bindHorizontalMouseWheel(ele) {
  if (ele.addEventListener) {
    // IE9, Chrome, Safari, Opera
    ele.addEventListener("mousewheel", scrollHorizontally, false);
    // Firefox
    ele.addEventListener("DOMMouseScroll", scrollHorizontally, false);
  } else {
    // IE 6/7/8
    ele.attachEvent("onmousewheel", scrollHorizontally);
  }
}

window.addEventListener('load', function() {
  bindHorizontalMouseWheel(document.getElementsByClassName('small')[0]);
});

body {
  height: 100vh;
  overflow: hidden;
}

.large {
  height: 100%;
  font-size: 32px;
  overflow-y: scroll;
}

.tall {
  height: 120%;
}

.small {
  width: 100%;
  overflow-x: scroll;
  white-space: no-wrap;
}

.wide {
  width: 120%;
}

<div class="large">
  This is large content vertical content
  <br>
  <hr><br>
  <div class="small">
    <div class="wide">This is smaller horizontal content</div>
  </div>
  <div class="tall"></div>
</div>

感谢this post 获取其中的部分代码。

【讨论】：

谢谢解答，反正可以用滚轮控制而不是恒速？
谢谢，这正是我所需要的。

【解决方案2】：

只有 CSS 的解决方案。我已经包含了 CSS3 动画和过渡版本。使用任何你喜欢的东西。

body {
  height: 100vh;
  overflow: hidden;
}

.large {
  height: 100%;
  font-size: 32px;
  overflow-y: scroll;
}

.tall {
  height: 120%;
}

.small {
  width: 100%;
  height: 1.5em;
  line-height: 1.5;
  position: relative;
}

.wide {
  white-space: nowrap;
  font-size: 1em;
  position: absolute;
  top: 0;
}

.wide1:hover {
  animation: 3s autoscroll linear;
  animation-fill-mode: forwards;
}

@keyframes autoscroll {
  from {
    left: 0;
    transform: translateX(0);
  }
  
  to {
    transform: translateX(-100%);
    left: 100%;
  }
}

.wide2 {
  left: 0;
  transform: translateX(0);
  transition: all 3s ease;
}

.wide2:hover {
  transform: translateX(-100%);
  left: 100%;
}

<body>
  <div class="large">
    This is large content vertical content
    <br><hr><br>
    <div class="small">
      <div class="wide wide1">This is smaller horizontal content This is smaller horizontal content This is smaller horizontal content</div>
    </div>
    <div class="small">
      <div class="wide wide2">This is smaller horizontal content This is smaller horizontal content This is smaller horizontal content</div>
    </div>
    <div class="tall"></div>
  </div>
</body>

【讨论】：

谢谢你的回答，反正我可以通过滚轮而不是恒定的速率来控制？