Seamless Scroll | Smartchart开发手册

Introduction #

Seamless scrolling components are used for announcement carousels, rankings, data tables, and other scenarios requiring automatic content loop scrolling. SmartChart provides two scrolling implementations: ds_liMarquee (based on the liMarquee plugin, supports seamless connection and rich configuration) and ds_scroll (simple native scrolling).

Scroll Function	Features	Use Cases
`ds_liMarquee(name, config)`	Seamless connection, direction/speed config, hover pause	Announcements, rankings
`ds_scroll(name, interval, step)`	Simple native implementation, CSS scrollTop	Simple data scrolling

Use Cases #

Seamless scrolling components are suitable for scenarios requiring automatic content loop scrolling, such as:

Announcement/news lists auto-scrolling up
Real-time data ranking loop display
Large screen carousel text, images, and other content

SmartChart provides two scrolling methods: ds_liMarquee (seamless scrolling based on liMarquee plugin) and ds_scroll (simple native scrolling).

Universal Seamless Scrolling: `ds_liMarquee` #

Basic Usage #

Define a scroll container in the HTML component, then call ds_liMarquee in JS:

<!-- HTML structure (defined in graphic's HTML template area) -->
<div id="smtid" style="height:100%">
    <ul>
        <li>SmartChart</li>
        <li>Big Data Visualization</li>
        <li>ECharts</li>
        <li>Let Data Speak</li>
    </ul>
</div>

// Pass the container's id selector
ds_liMarquee('#smtid')

// Also supports class selector
ds_liMarquee('.smtclass')

Dataset-Driven Dynamic Scroll List #

Combine with datasets to dynamically generate scroll content:

let dataset = __dataset__  // [['title'], ['Announcement 1'], ['Announcement 2'], ['Announcement 3']]
let items = dataset.slice(1).map(row => `<li>${row[0]}</li>`).join('')

dom__name__.innerHTML = `<div id="scroll__name__" style="height:100%"><ul>${items}</ul></div>`

// Initialize seamless scrolling
ds_liMarquee('#scroll__name__')

Full Configuration #

let marconfig = {
    playtime: 3000,    // Scroll duration (ms), starts carousel when > 100
    pausetime: 3000,   // Pause duration (ms)
    config: {
        direction: 'up',      // Scroll direction: up / down / left / right
        runshort: false,      // Whether to scroll when content is less than one screen (false=no)
        scrollamount: 20,     // Scroll speed, higher = faster
        loop: -1,             // Loop count, -1 for infinite
        circular: true,       // Seamless connection (true=seamless, false=marquee-like)
        drag: true,           // Support mouse drag
        hoverstop: true       // Pause on mouse hover
    }
}

ds_liMarquee('#scroll__name__', marconfig)

Configuration Parameters #

Parameter	Type	Default	Description
`direction`	String	`left`	Scroll direction: `left` / `right` / `up` / `down`
`loop`	Integer	`-1`	Loop count, `-1` for infinite
`scrolldelay`	Integer	`0`	Delay before each repeat (ms)
`scrollamount`	Integer	`50`	Scroll speed, higher = faster
`circular`	Boolean	`true`	Seamless scrolling (`false` = marquee effect)
`drag`	Boolean	`true`	Mouse draggable
`runshort`	Boolean	`true`	Whether to scroll when content is insufficient
`hoverstop`	Boolean	`true`	Pause on mouse hover
`inverthover`	Boolean	`false`	Inverse mode (don’t scroll by default, scroll on hover)

Built-in Scroll Table #

SmartChart has a built-in one-click scroll table feature, available directly from basic graphics without writing HTML structure.

Custom Styles #

To modify scroll table fonts, colors, row heights, and other styles, override these class names in the template’s CSS area:

/* Header style */
.smtlisthead {
    background: #fff2cc;
    color: #333;
    height: 5rem;
}

.smtlisthead span {
    height: 5rem;
}

/* Table body area (data row container) */
.smtlistnav {
    height: calc(100% - 5rem);
    color: #333;
    overflow: auto;
}

.smtlistnav li span {
    height: 3rem;
}

/* Odd row background color (change odd to even for even rows) */
.smtlistnav ul li:nth-child(odd) {
    background: rgba(100, 100, 100, .1);
}

Specify Cell Width Alignment #

When you need to fix a column width, set width and flex-shrink:0 on the corresponding <span>:

<span>
    <span style="width:32rem; height:100%; flex-shrink:0; justify-content:left">Column content</span>
</span>

Row Click Linkage (Scroll List) #

let lastClickDom, lastDomColor;

$('#smtlist__name__ li').unbind('click').click(function(params) {
    // Restore previous clicked row's background
    try { lastClickDom.css('background', lastDomColor) } catch {}
    // Highlight current row
    lastDomColor = $(this).css('background')
    $(this).css('background', 'rgba(24,144,255,0.15)')
    lastClickDom = $(this)
    // Get first column value as parameter
    let myparam = $(this).children('span').eq(0).text()
    ds_setParam('item', myparam)
    ds_refresh(2)   // Linked refresh of graphic number 2
})

Row Click Linkage (Regular Table) #

let lastClickDom, lastDomColor;

$('#container___name__ tr').unbind('click').click(function(params) {
    try { lastClickDom.css('background', lastDomColor) } catch {}
    lastDomColor = $(this).css('background')
    $(this).css('background', 'rgba(24,144,255,0.15)')
    lastClickDom = $(this)
    let myparam = $(this).children('td').eq(0).text()  // Get first column value
    ds_setParam('item', myparam)
    ds_refresh(2)
})

Simple Native Scrolling: `ds_scroll` #

ds_scroll is based on native CSS scrollTop, suitable for simple auto-scroll-down scenarios (seamless effect is not as good as ds_liMarquee):

// Pass container id, interval scroll interval (ms), step pixels per scroll
ds_scroll('#container___name__', 1000, 10)

Parameter	Description	Default
`name`	Container selector (id or class)	—
`interval`	Scroll interval (ms)	`1000`
`step`	Pixels per scroll	`10`