Related questions

How do I hide a scrollbar after scrolling and make it visible again on scroll?

2022-01-23 02:13 user517339 imported from Stackoverflow

My intention is to hide my scrollbar (i.e, hidden by SLIDING TO THE RIGHT), after scrolling (let's say, like 2 or 3 seconds after I'm done scrolling)

And to make it visible again, soon as I start scrolling (i.e, visible by SLIDING IN FROM THE RIGHT)

VIEW CODE SNIPPET:

div::-webkit-scrollbar {
  width: 8px;
  /* helps remove scrollbar which resizes or shifts list items */
  /* display: none; */
}

div::-webkit-scrollbar-track {
  background-color: #444444;
}

div::-webkit-scrollbar-button:vertical:increment {
  background-color: rgba(108, 92, 231, 0.65);
}

div::-webkit-scrollbar-button:vertical:decrement {
  background-color: rgba(108, 92, 231, 0.65);
}

div::-webkit-scrollbar-thumb {
  background-color: rgba(108, 92, 231, 0.7);
  border-radius: 10px;
}

div::-webkit-scrollbar-thumb:hover {
  background-color: rgba(108, 92, 231, 1);
}

div {
  width: 500px;
  height: 300px;
  background-color: #ececec;
  overflow: auto;
}
<div>
  <p style="height: 300vh;">Just some tall paragraph to force DIV scrollbars....</p>
</div>

Please help me everyone (I'D BE SO GRATEFUL!)

:D

2 answers

  • answered 2022-01-23 02:21 Cafer Aydın

    I am thinking about what if user do not have any mouse wheel for scrolling and if user scroll with the actually using scroll bar. Anyway please search for slim fading scroll bar example at google. You will find some examples for the slim scroll maybe it’s not invisible but it’s transparent and have a good shape.

  • answered 2022-01-23 02:49 Roko C. Buljan

    Since CSS does not have timeouts and clearing of timeouts - Use JavaScript

    • Use Element.classList to add and remove a class
    • Use setTimeout() set at 2500ms, but every time a scroll event is triggered remove the previous pending timeout using clearTimeout. Logically, after you finished scrolling the last timeout that was set will, after 2.5s trigger finally the class removal.
    • Use a CSS class like .is-scrolling to there define the desired scrollbar styles (which otherwise are transparent by default)

    const showScrollbars = (evt) => {

  const el = evt.currentTarget;
  clearTimeout(el._scrolling); // Cancel pending class removal
  
  el.classList.add("is-scrolling"); // Add class 
  
  el._scrolling = setTimeout(() => { // remove the scrolling class after 2500ms
    el.classList.remove("is-scrolling");
  }, 2500);
};

document.querySelectorAll("[data-scrollbars]").forEach(el => {
  el.addEventListener("scroll", showScrollbars); 
});
    [data-scrollbars] {
  width: 500px;
  height: 180px;
  background-color: #ececec;
  overflow: auto;
}

[data-scrollbars]::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-scrollbars]::-webkit-scrollbar-track {
  background-color: transparent;
}

[data-scrollbars]::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 10px;
}

[data-scrollbars].is-scrolling::-webkit-scrollbar-track {
  background-color: #777;
}

[data-scrollbars].is-scrolling::-webkit-scrollbar-thumb {
  background-color: gold;
}
    <div data-scrollbars>
  <p style="height: 300vh;">
    Just some tall paragraph to force DIV scrollbars...<br>
    Scroll me! (<<< PS: See the problem?!)
  </p>
</div>

    I would highly not advise you hide scrollbars. Scrollbars are a visual hint to the user that there's actually content to be scrolled. Do a simple A/B testing. For half of your visitors show the scrollbar. For the other half, do that funky stuff - and don't be surprised that your click trough-rate for the below-the-fold portion of the app (or element) has fewer-to-none interactions by that second group of users.

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum

See also questions close to this topic

  • how to change prettier format for react native

    my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

    from this code

          import { View, Text } from 'react-native'
    
    import React from 'react'
    
    export default function App() {
      return (
        <View>
    
    <Text>Apps</Text>   
</View>
      )
    }

    it's formatted to this

    import {
  View,
  Text
} from 'react-native'

import React from 'react'

export default function App() {
  return ( <
    View >

    <
    Text > Apps < /Text>


    <
    /View>
  )
}
  • MarkLogic server-side JavaScript and XQuery

    I am just starting using NoSQL MarkLogic DB and trying to choose for me the best query language to learn and use in future. On server side MarkLogic provides the possibility to use JavaScript API or XQuery API.

    I want to receive an advice. Which language is better to concentrate on and learn? JavaScript or XQuery?

  • Popover in chrome extension using js

    My goal is I want to create a chrome extension like Toucan Extension. I want to highlight some paragraphs in random site then translate it to specific language. The problem is I do not have an idea on how to implement a popover in chrome extension like in the picture below.

    Example

  • Creating Sticky Navbar with Drop Down Menu HTML

    I am creating a HTML web page which contains a sticky navbar with drop down menu. However, when I created one, the dropdown menu does not works in the sticky navbar and so goes vise versa. below is the screenshot of both the result of the two codes.

    *image with dropdown menu but without sticky navbar

    *image with sticky navbar but without dropdown menu

    below is the code for "image with dropdown menu but without sticky navbar"

        <!DOCTYPE html>
    <html>
    <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-    awesome/4.7.0/css/font-awesome.min.css">
    <style>
    body {margin:0;font-family:Arial}

   .topnav {
    overflow: hidden;
    background-color: #333;
  }

  .topnav a {
    list-style-type: none;
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    position: sticky;
  }



  .active {
    background-color: #04AA6D;
    color: white;
  }

  .topnav .icon {
    display: none;
  }

  .dropdown {
    float: left;
    overflow: hidden;
  }

  .dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }

  .topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #555;
    color: white;
  }

  .dropdown-content a:hover {
    background-color: #ddd;
    color: black;
  }

  .dropdown:hover .dropdown-content {
    display: block;
  }

  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
    .topnav a.icon {
      float: right;
      display: block;
    }
  }

  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
    }
  }
  </style>
  </head>
  <body>
        <div class="header">
        <h2>Scroll Down</h2>
    <p>Scroll down to see the sticky effect.</p>
  </div>

  <div class="topnav" id="myTopnav">
    <a href="#home" class="active">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <div class="dropdown">
      <button class="dropbtn">Dropdown 
        <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div> 
    <a href="#about">About</a>
    <a href="javascript:void(0);" style="font-size:15px;" class="icon"     onclick="myFunction()">&#9776;</a>
  </div>

  <div style="padding-left:16px">
    <h2>Responsive Topnav with Dropdown</h2>
    <p>Resize the browser window to see how it works.</p>
    <p>Hover over the dropdown button to open the dropdown menu.</p>
  </div>

  <h3>Sticky Navigation Bar Example</h3>
  <p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
  <p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari         requires a -webkit- prefix.</p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>


  <script>
  function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }
  </script>

  </body>
  </html>

    below is the code for "image with sticky navbar but without dropdown menu"

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-    awesome/4.7.0/css/font-awesome.min.css">
<style>


body {
  font-size: 20px;
}
body {margin:0;}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px 20px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
    
/*======================================================================*/

body {
  background-color:white;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #38444d;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
    
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}


footer {
  text-align: center;
  padding: 3px;
  background-color: DarkSalmon;
  color: white;
}

</style>
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<ul>
  <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li class="dropdown">
      <a href="javascript:void(1)" class="dropbtn">Dropdown</a>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </li>
</ul>

<h3>Sticky Navigation Bar Example</h3>
<p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
<p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari requires a -webkit- prefix.</p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>


<footer>
  <p>Author: Hege Refsnes<br>
  <a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>


</body>
</html>

    Please i need some help with this as i am new to html and css.

  • Javascript: Change element class if button has a certain value 
    
        <div class="main-div main-div2"> <!-- IF up to date, main-div3 -->
          <button id="update-btn" class="btn update-btn"> 
              Up to date
          </button>
        </div>

    I want to make it so if update-btn has a value of "Up to date", change the div class from "main-div main-div2" to "main-div main-div3". Otherwise, if it's any other value, change it to "main-div main-div2"

    What kind of loop would be good for this Javascript function too if I want it to be checking constantly?

    Thank you.

  • Boostrap vertical sizing with different style width and height

    I am trying to set verticaly icon on profile photo card inside div to be in the middle in white box(div), but dont know why it doesnt works. When I use style="width: 300px; height: 300px; for div square I can center it on horizontaly, but not verticaly :/ Can someone explain me what I am doing wrong?

    Anyway is there any way how to resize bootstrap icons except display-1???

     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    
  <div class="container-sm offset-md">
        <h1 class="p-4 m-4">Nastavení profilu</h1>
        <div class="row">
            <div class="col">
                <div class="card p-4 m-4">
                    Osobní údaje
                    <input type="text" name="name" class="form-control" placeholder="Jméno">
                    <input type="text" name="surname" class="form-control" placeholder="Příjmení">
                    <input type="email" name="email" class="form-control" placeholder="E-Mail">
                    <input type="date" name="name" class="form-control">
                </div>
                
            </div>

            <div class="col-4">
                <div class="card p-4 m-4 bg-light">
                    Profilová fotografie
                    <div class=" square text-center border display-1 m-3 bg-white mx-auto">
                        <i class="bi bi-person-fill align-middle justify-content-center text-secondary"></i>
                    </div>

                    <input type="file" id="customFile" name="file" hidden="">
                        <div class="text-center">
                            <button class="btn btn-success" for="customFile">Nahrát</button>
                            <button type="button" class="btn btn-danger">Smazat</button>
                            
                            <p class="text-muted mt-3 mb-0">Poznámka: Minimální velikost 300px x 300px</p>
                        </div>
                </div>
                
            </div>
        </div>

        <div class="row">
            <div class="col">
                <div class="card p-4 m-4">
                    Změna hesla
                </div>
                
            </div>

            <div class="col">
                <div class="card p-4 m-4">
                    Zobrazit/skrýt podrobnosti
                </div>
            </div>
        </div>
    </div>

  • Infinite Automatic Horizontal Scroll With Static Content Underneath

    I'm trying to create a horizontal bar of images at the top of my webpage. I'd like the banner of images to slowly pan-through/scroll automatically on page load, but I don't want the entire page to scroll along with it because there's content underneath the banner I want to stay in place for the viewer. Also I would like the banner to be infinite so when it gets to the end it seamlessly restarts. I'm thinking I can use setInterval and put the container div on overflow: scroll, but again I would like for the entire page to remain static. Any ideas are greatly appreciated. Having trouble adding an image here but this link will show an example of what I'm going for: [https://imgur.com/a/IpR8ztw][1]

    import './CategoryList.scss'

export default function CategoryList({ categories }) {


  return (
    <div className="categories">
      <ul className="categories__list">
      {categories && categories.map((category, i) => {
          return (
            <div key={i} className="categories__card">
              <Link
                to={`/guides/${category.id}`}
                key={i}
                className="categories__link"
              >
                <h3 className="categories__title">{`${category.name}`}</h3>
                <img
                  className="categories__poster"
                  src={category.poster}
                  alt="guide cover"
                />
              </Link>
            </div>
          );
        })}
      </ul>
    </div>
  )
}


  [1]: https://imgur.com/a/IpR8ztw
  • What’s the best way to build a multi-barrel/scroll function similar to this;

    enter image description here

    I need to build something like the timer pictured but for text/sentences. (Multiple moving parts) I don’t know how to call it more specifically so any information would be greatly appreciated.

  • LiveChart.WinForms.CartesianChart scrollable

    I am developing a C# WinForm application. I am using cartesianchart from LiveChar.Winforms.I want to do a scrollable graph. I added too many items on chart and the chart fit all items to area. I want to put scroll bar bottom of cartesianchart thus items not to be stuck viewing area.

  • CSS overflow property breaks my interactions with elements in chromium browsers

    I don't know why but, when I add an overflow property to my div container, then each element inside is not interactable (it just happens on chromium browsers, in firefox works properly), I can't select any text, grab images, etc... It behaves like I would use pointer-events: none; but I didn't, I need a scrollable div, and I can not do this due to that bug. Can someone explain that? Is there my mistake or just a normal bug with chromium-browser? I tried some scrollbar libraries, but it doesn't work as well. I use the translateZ() property and basically, it's a 3d cube in CSS, maybe the browser has a problem with 3d elements.

    I prepared some quick example, look at that cube's second face. There's a text it goes over an element, because the element has just 100vh of height, when I add overflow and want to do it scrollable it takes all interactivity even the dev highlight tool doesn't react with that. I assume it could be because the browser thinks that element is not here on Z-axis, but away from here.

    const cube = document.querySelector(".cube");
        const cnt = document.querySelector(".cnt");
        const wrapper = document.querySelector(".wrapper");

        document.addEventListener("wheel", e => {
            if (e.ctrlKey) return;
            if (e.deltaY > 0) {
                //scroll down
                cube.classList.add("rotated-down");
                wrapper.classList.add("wrapper-rotated-down");
            } else if (e.deltaY < 0) {
                //scroll up
                cube.classList.remove("rotated-down");
                wrapper.classList.add("wrapper-rotated-up");
            } else if (e.deltaX < 0) {
                //scroll up
                cube.classList.add("rotated-side");
            } else if (e.deltaX > 0) {
                //scroll up
                cube.classList.remove("rotated-side");
            }
        });

        wrapper.ontransitionend = e => {
            if (wrapper.classList.contains("wrapper-rotated-down")) {
                wrapper.classList.remove("wrapper-rotated-down");
            } else if (wrapper.classList.contains("wrapper-rotated-up")) {
                wrapper.classList.remove("wrapper-rotated-up");
            }
        };

        document.addEventListener("keydown", e => {
            if (e.key === "ArrowDown") {
                //scroll down
                cube.classList.add("rotated-down");
            } else if (e.key === "ArrowUp") {
                //scroll up
                cube.classList.remove("rotated-down");
            } else if (e.key === "ArrowLeft") {
                //scroll up
                cube.classList.add("rotated-side");
            } else if (e.key === "ArrowRight") {
                //scroll up
                cube.classList.remove("rotated-side");
            }
        });
    @keyframes goAndCome {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(0.5);
            }

            100% {
                transform: scale(1);
            }
        }

        body {
            margin: 0;
            position: relative;
            width: 100vw;
            height: 100vh;
            background: #40a3ff;
            overflow: hidden;
        }

        .wrapper {
            transform: scale(1);
        }

        .wrapper-rotated-down {
            animation: goAndCome 0.7s 0s ease forwards;
        }

        .wrapper-rotated-up {
            animation: goAndCome 0.7s 0s ease forwards;
        }

        .cnt {
            perspective: 3000px;
        }

        .cube {
            position: relative;
            width: 100vw;
            height: 100vh;
            transform-style: preserve-3d;
            transform: translateZ(-50vh) rotateX(0) rotateY(0);
            transition: transform 0.5s 0s linear;
            box-shadow: inset 0 0 125px white;
        }

        .rotated-down {
            transform: translateZ(-50vh) rotateX(0.25turn);
        }

        .rotated-side {
            transform: translateZ(-50vh) rotateY(0.25turn);
        }

        .side {
            position: absolute;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            width: 100vw;
            height: 100vh;
            opacity: 0.9;
            color: rgb(255, 0, 0);
            font-size: 2rem;
        }

        .side:hover::before {
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            content: "Active";
            font-size: 5rem;
            color: rgb(255 255 255);
        }

        .back {
            background: green;
            transform: rotateX(0) translateY(0) translateZ(50vh);
        }

        .bottom {
            overflow: auto;  /* - takes all interactivity from element */
            background: rgb(0, 66, 153);
            transform: rotateX(-90deg) rotateZ(0) translateY(0) translateZ(50vh);
        }

        .text {
            display: block;
        }
    <div class="wrapper">
            <div class="cnt">
                <div class="cube">
                    <div class="side back"><span>Hello</span></div>
                    <div class="side bottom">
                        <div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

  • sapui5 Gantt chart table view remove scrollbar

    My Gantt chart table view renders a weird horizontal scrollbar under the vertical scrollbar. I want to remove it because it looks weird. Does anybody have any advice ?

    See the little gray dot in under the vertical scrollbar:

    the little gray dot in under the vertical scrollbar

  • How to add scroll to x-axis displaying date in Charticulator?

    I am trying to make a specific form of gantt-chart in Charticulator for display in Power BI. The diagram consists of:

    X-axis: Start datetime for the assignment Y-axis: group member Width of mark: Number of minutes assignment is estimated for Color of mark: Type of assignment

    See example

    Here's the problem: As soon as I tick off the "Allow Scroll" for X-axis, all data marks disappears, and the settings for the axis changes to seemingly only have data for one day. The glyph also becomes blank with the text "to edit this glyph please add a plot segment to it", even though I just had a plot segment before selecting "Add scroll". This is only a problem for data with datetime, not if I change it to a string, which unfortunately would create other issues.

    Before adding scroll

    After adding scroll

    Does anyone have a fix to create a x-axis with datetime with scroll?