在 'mousemove' 和 'scroll' 这两个事件上显示自定义水平滚动条，然后在 ~1 秒内没有触发任何事件时隐藏滚动条

Question

我有一个自定义滚动条，我只希望当鼠标在页面上移动时可见（整个主体，而不仅仅是在#scrolling-wrapper 内）或滚动 div #scrolling-wrapper。当鼠标静止约 1 秒（或典型滚动条的默认设置长度）并且没有滚动时，滚动条应该淡出。它应该像默认的自动隐藏滚动条一样工作，但具有我的自定义样式。唯一的区别是它也应该在鼠标移动时出现，而不是仅在 div 滚动时出现，因为使用鼠标的用户将无法使用鼠标滚轮在水平 div 范围内滚动。 ..因此需要在移动鼠标时出现滚动条。

这是一个 JSFiddle (https://jsfiddle.net/jde7s1kr/)，它具有 @nidhin-joseph 的解决方案，它很接近，但它不能像我需要的那样在 100% 的时间内正常工作。有时滚动条不会出现在鼠标移动或滚动时，有时它不会消失。该代码还迫使视频有时会稍微上下跳动（在添加 JS 事件以显示/隐藏滚动条之前不会出现此问题）。我假设这与滚动条的出现和强制视频稍微向上有关。这也不可能发生。

所以澄清一下：当鼠标移动或 div 滚动时，我需要滚动条可见，只要这两个动作中的任何一个在 ~1 秒内没有发生，滚动条就会淡出。

代码：

<div id="horizontalcontainer">
  <div id="scrolling-wrapper">
    <div class="videocard1">
      <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    </div>
    <div class="videocard">
      <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    </div>
    <div class="videocardlast">
      <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    </div>
  </div>
</div>

::-webkit-scrollbar {
    height: 2%;
    display: var(--scroll-display);
}

:root {
    --scroll-display: none;
}

/* Track */
::-webkit-scrollbar-track {
    background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: black;
    border-radius: 25px;
}

#horizontalcontainer {
    z-index: 0;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

#scrolling-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    text-align: center;
    margin: 0 auto;
    height: 100vh;
    width: 100vw;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.videocard1 {
    padding-left: 27%;
    padding-right: 2.5%;
    display: inline-block;
    width: 46.5%;
    top: 50%;
    transform: translateY(-50%);
}

.videocard {
    padding-right: 2.5%;
    display: inline-block;
    position: relative;
    width: 46.5%;
    top: 50%;
    transform: translateY(-50%);
}

.videocardlast {
    padding-right: 27%;
    display: inline-block;
    position: relative;
    width: 46.5%;
    top: 50%;
    transform: translateY(-50%);
}

谢谢！

Answer 1

您可以使用 css-variable 设置 ::-webkit-scrollbar 的值，并根据鼠标移动更改变量值并使用 setInterval 跟踪它以在 2 秒后隐藏滚动条。

注意：由于某些奇怪的原因，单击运行代码段时这不起作用，用户可以查看完整视图并且它将起作用。用iframe什么的猜猜。

let div = document.getElementById('scrolling-wrapper');
var myTimer = setInterval(onTimer, 2000);

window.addEventListener('mousemove', () => {
  showScroll();
  resetTimer();
});

function onTimer() {
  hideScroll();
}

function resetTimer() {
  clearInterval(myTimer);
  myTimer = setInterval(onTimer, 2000);
}

function showScroll() {
  div.style.setProperty('--scroll-display', 'block');
}


function hideScroll() {
  div.style.setProperty('--scroll-display', 'none');
}

::-webkit-scrollbar {
  height: 1%;
  display: var(--scroll-display);
}

:root {
  --scroll-display: none;
}

#scrolling-wrapper:hover> ::-webkit-scrollbar {
  display: block;
}


/* Track */

::-webkit-scrollbar-track {
  background: transparent;
}


/* Handle */

::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 25px;
}

#horizontalcontainer {
  z-index: 0;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

#scrolling-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  text-align: center;
  margin: 0 auto;
  height: calc(100% - 145px);
  width: 100vw;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.videocard1 {
  padding-left: 27%;
  padding-right: 2.5%;
  display: inline-block;
  position: relative;
  width: 46.5%;
  top: 50%;
  transform: translateY(-50%);
}

.videocard {
  padding-right: 2.5%;
  display: inline-block;
  position: relative;
  width: 46.5%;
  top: 50%;
  transform: translateY(-50%);
}

.videocardlast {
  padding-right: 27%;
  display: inline-block;
  position: relative;
  width: 46.5%;
  top: 50%;
  transform: translateY(-50%);
}

<div id="horizontalcontainer">
  <div id="scrolling-wrapper">
    <div class="videocard1">
      <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    </div>
    <div class="videocard">
      <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    </div>
    <div class="videocardlast">
      <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    </div>
  </div>
</div>

Answer 2

With the details you submitted, This solution offer you the customization you want for your famous custom scrollbar. This solution offer browser compatibility. This solution offer css only or Css + jS callback

Found issues in your code You want it compatible with 100% browser but use specific Webkit Css? By default scroll-bars takes +/- 20px of the viewport it usualy need to be taken into accounts? That's why content jump around when you show/hide default overflow scrollbars.这不是一个错误，这是一个功能。 Only on mobile the standard scroll is over the content.

So to fullfill your requirements. Here's what you need to do, use a framework that take into account the multiple caveats of the different browser, if not you'll be tweaking Javascript and Css forever each time to test it in a new browser. In this case here ill Be Using SimpleBar to allow you customization And use Jquery to trigger SimpleBar Into Action And set the timeout to "2000" miliseconds This will work in modern browser '100% of the time'.

Simplebar https://github.com/Grsmto/simplebar/tree/master/packages/simplebar

Working JSfiddle https://jsfiddle.net/ft9h210g/12/

HTML

    <head>
        <link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" />
    </head>
<body>
    <script   src="https://code.jquery.com/jquery-3.4.1.min.js"
              integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
              crossorigin="anonymous"></script>
    <script src="https://unpkg.com/simplebar@latest/dist/simplebar.min.js"></script>

    <div id="horizontalcontainer">
      <div id="scrolling-wrapper">
        <div class="videocard1">
          <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
        </div>
        <div class="videocard">
          <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
        </div>
        <div class="videocard">
          <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
        </div>
        <div class="videocardlast">
          <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
        </div>
      </div>
    </div>
</body>

JS

    const simplebar = new SimpleBar(document.querySelector('#scrolling-wrapper'), {
    autoHide: true,
  timeout: 2000
});

css

.hidden {
  display: none;
}

#container {
  width: 200px;
}

#scrollable {
  height: 200px;
}

.simplebar {
  position: relative;
  z-index: 0;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

::-webkit-scrollbar {
  height: 1%;
  display: var(--scroll-display);
}

:root {
  --scroll-display: none;
}



#horizontalcontainer {
  z-index: 0;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
 /*
 height: 100%;
*/
height: 400px;
  display: flex;
  align-items: center;
}

#scrolling-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  text-align: center;
  margin: 0 auto;
  height: 250px;
  width: 100vw;
/* 
 -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
*/
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.videocard1 {
  padding-left: 27%;
  padding-right: 2.5%;
  display: inline-block;
  position: relative;
  width: 46.5%;
/*   top: 50%;
  transform: translateY(-50%); */
}

.videocard {
  padding-right: 2.5%;
  display: inline-block;
  position: relative;
  width: 46.5%;
 /* top: 50%;
  transform: translateY(-50%); */
}

.videocardlast {
  padding-right: 27%;
  display: inline-block;
  position: relative;
  width: 46.5%;
/*  top:0%;
  transform: translateY(-50%); */
}

I modified the original css To show where the Horizontal scroll Can end up showing, ex:

#horizontalcontainer {
 /*
 height: 100%; //show at the bottom
*/
height: 400px; //show after 400px
}

but you can change it to the taste of your project. You can use Jquery and Simplebar from CDN or move the CSS + JS files it to your project, to customize The scroll bar you need to Download simplebar.css and / or overwrite the css properties of simplebar.css with your own customizations.

在 'mousemove' 和 'scroll' 这两个事件上显示自定义水平滚动条，然后在 ~1 秒内没有触发任何事件时隐藏滚动条

Display a custom horizontal scrollbar on both events 'mousemove' and 'scroll' and then hide the scrollbar when neither event is fired for ~1 second

javascript

jquery

html

css

mouseevent