For DAKboard blocks that do not offer a built-in scrolling feature, customers may request such a feature be added. While awaiting acceptance and development of a polished built-in method, there is still a way to add scrolling to a block using our Custom CSS feature!  A few things to keep in mind when using this approach:

  • Intermediate-to-advanced technical knowledge may be required to tweak the examples shown in this article
  • This approach may not work well with more complex blocks
  • Dynamic content (such as can come in from Fetch blocks) that varies widely in size may be challenging to fine-tune


To request a scrolling feature on a specific block, please review the open Discussions for the topic, and add your own use-case to it, or open your own Discussion if you are unable to find one already underway.


To gain more familiarity with our Custom CSS feature, please visit the article "Applying Custom Styles to Screens".


To continue on and add scrolling to a basic block, login to DAKboard and edit a Screen, and identify the block to add scrolling to using the methods learned from the "Applying Custom Styles to Screens" article.


In order to make it easier to code and provide specificity, the example block here has been given the name "My Scrolling Fetch Block".  It has been set up with a URL that will pull in some text to scroll into the second of the fetched values.  Here is an example of what the block will look like, before, and then after adding the scrolling effect:


Before


(Motion-blurred to show scrolling region)

After



For reference, the block settings are:


The Custom CSS this block uses is as follows:

.block--MyScrollingFetchBlock .json-data:nth-child(2) {
   overflow: hidden;
   height: 15em;
}


@keyframes scroll-vert-marquee-1 {
   0% {transform: translateY(0%);}
  10% {transform: translateY(0%);}
  40% {transform: translateY(-100%);}
  60% {transform: translateY(-100%);}
  90% {transform: translateY(0%);}
 100% {transform: translateY(0%);}
}


.block--MyScrollingFetchBlock .json-data:nth-child(2) .json-data-value {
  animation-name: scroll-vert-marquee-1;
  animation-duration: 8.5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

To add this code to a Screen, the "Add Custom CSS Rules" option for Predefined Screens is located under the "Settings & Defaults" tab.  For Custom Screens, click the "Styles" button in the upper-left to open the drop-down and find the option there.


The values to change for fine-tuning the scrolling:


  • Adjusting the speed:
    • Change the number of seconds ("8.5") on the line for "animation-duration: 8.5s;"


  • Adjusting the scrollable area:
    • Change the "15em" on the line for "height: 15em"
    • Remove the line for "height: 15em" altogether to use up the entire space allotted to the block


Understanding these Custom CSS Rules

Rule 1

  • The CSS Selector ".block--MyScrollingFetchBlock .json-data:nth-child(2)" targets the content for a block that has been named "My Scrolling Fetch Block", then inside of that, it targets the second container that has a class of "json-data"


  • Since we only want to see the viewable portion of that json-data item, we hide content that falls outside of that area with the "overflow" declaration.


  • (Optionally) setting a height will constrain the content to that size, otherwise, long content will stretch too far, and shorter content will not take up the same amount of space.


Rule 2

  • The scrolling effect, in this case, is generated using an "animation" effect.  A common technique for animations is to denote the steps where (or "when" in the animation timeline) important things happen, and then let the computations determine the transition between the steps.  This is known as "keyframing".


  • This rule defines the keyframe points in the animation.  The animation will begin with everything as-is when it initially renders the block.  It remains in that state for a short period and then starts moving until it has vertically "scrolled" past the full height of the content, then stopping for a short period.  And finally, it scrolls back to the original state in the same manner, and the whole process repeats again.


Rule 3

  • This rule targets the "json-data-value" under the "json-data" container and ties the earlier two rules together by applying the keyframes and other animation characteristics to the content.


  • It essentially tells the Screen to use the earlier set of keyframes (scroll-vert-marquee-1) to loop an animation forever, and have it run through a single course in 8 and half seconds, in a linear (even and smooth) fashion.


Optional Settings

Stop Scrolling When Mouse Cursor is Over Contents

For those who use their Screens in a more interactive manner, we can add the following Custom CSS to have the scrolling effect by moving the mouse cursor into the scrolled area:

.block--MyScrollingFetchBlock .json-data:nth-child(2) .json-data-value:hover {
  animation-play-state: paused;
}

Changing to a Horizontal Scroll or Ticker Effect

For the side-scrolling "ticker" effect, we can create a different set of keyframes that have it start off-screen to the left, scroll smoothly in and across, until it goes off-screen at the right by adding the following CSS rule:


@keyframes scroll-horiz-marquee-1 {
   0% {transform: translateX(-105%);}
 100% {transform: translateX(105%);}
}

And, then, we tell it to use these new keyframes by changing the line in the original CSS:

  • From:  animation-name: scroll-vert-marquee-1;
  • To:  animation-name: scroll-horiz-marquee-1;