Fake scroll bars in browser

Question

I want to provide the user with the experience of scrolling through content, but I would like to load the content dynamically so the content in their viewing area is what they would expect, but there is no data above or below what they are looking at. For performance reasons, I don't want that data loaded. So when they scroll down new data gets loaded into their view, and data previously in their view is discarded. Likewise when scrolling up. The scroll bar should represent their location within the entire content though, so using "infinite scrolling" or "lazy loading" does not look like what I need.

My solution may be that I need to re-architect things. As of now, my project is a hex-viewer that allows you to drop a binary file onto it. I create html elements for every byte. This causes performance issues when you end up with a 1MB file (1,000,000+ DOM elements). One solution would be to not use DOM elements/byte but I think this will make other features harder, so I'd like to just not display as many DOM elements at once.

I may be missing it, but I don't see a specific question in there. — Daedalus, Jul 30 '12 at 21:31
I would like the options available for creating fake scroll bars, or a correction on the terminology I am using. — 0xdabbad00, Jul 30 '12 at 21:32
I want to create a viewing area showing only the DOM elements that the user currently is looking at. No other DOM elements should exist, else performance problems occur. — 0xdabbad00, Jul 30 '12 at 21:34
Hoe experienced are you in this area? It can be done, but at the cost of serious development time. — FloydThreepwood, Jul 30 '12 at 21:36

Roman Goyenko · Answer 1 · 2012-07-30T22:03:41.410

Make a div, set overflow to scroll or auto. As user scrolls you can change the content of the div. You could look at yahoo mail (the JavaScript based one) to see how they do it (they add rows with email as you scroll).

You don't necessarily need custom scroll bars.

You could look for some code here for custom scroll bars: http://www.java2s.com/Code/JavaScript/GUI-Components/Scrolltextwithcustomscollbar.htm

or here: http://www.dyn-web.com/code/scroll/

kelceyp · Answer 2 · 2016-06-05T05:48:47.960

I'm looking for an answer to this question as well so I'll share where I'm at with it.

I have a large amount of content I want to display vertically and have the user scroll through it. I can load it all into the DOM and scroll normally but that initial creation phase is horribly slow and scrolling can awfully slow also. Also, I will dynamically add to it as I stream more data in.

So I want the same thing which is to be able to dynamically populate and update a non-scrolling area with content. I want to make it seem as if the user is scrolling through that content and have a model (which has lots of data) that is kept off the DOM until it would be seen.

I figure I'll use a queue concept for managing the visible DOM elements. I'd store queueHeadIndex and queueTailIndex to remember what off-DOM elements are shown in the DOM. When the user scrolls down, I'd work out what whether the head of queue falls off the screen and if it does update queueHeadIndex and remove it's DOM element. Secondly I'd then work out whether I need to update queueTailIndex and add a new element to the DOM. For the elements currently in the DOM I'd need to move them (not sure if they need animation here or not yet).

UPDATE: I've found this which seems to have some promise http://jsfiddle.net/GdsEa/

My current thinking is that there are two parts to the problem.

Firstly, I think I want to disable scrolling and have some sort of virtual scrolling. I've just started looking at http://www.everyday3d.com/blog/index.php/2014/08/18/smooth-scrolling-with-virtualscroll/ for this. This would capture all the events and enable me to programmatically adjust what's currently visible etc. but the browser wouldn't actually be scrolling anything. This seems to provide mouse wheel driven scrolling.

Secondly, I think I need to display a scroll bar. I've had a look at http://codepen.io/chriscoyier/pen/gzBsA and I'm searching around more for something that looks more native. I just want it to visually display where the scroll is and allow the user to adjust the scroll position by dragging the scroller.

Stackoverflow is insisting I paste code so here is some code from that codepen link above

var elem = document.getElementById('scroll-area'),
    track = elem.children[1],
    thumb = track.children[0],
    height = parseInt(elem.offsetHeight, 10),
    cntHeight = parseInt(elem.children[0].offsetHeight, 10),
    trcHeight = parseInt(track.offsetHeight, 10),
    distance = cntHeight - height,
    mean = 50, // For multiplier (go faster or slower)
    current = 0;

elem.children[0].style.top = current + "px"; 
thumb.style.height = Math.round(trcHeight * height / cntHeight) + 'px'; 

var doScroll = function (e) {

    // cross-browser wheel delta
    e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

    // (1 = scroll-up, -1 = scroll-down)
    if ((delta == -1 && current * mean >= -distance) || (delta == 1 && current * mean < 0)) {
        current = current + delta;
    }

    // Move element up or down by updating the `top` value
    elem.children[0].style.top = (current * mean) + 'px';
    thumb.style.top = 0 - Math.round(trcHeight * (current * mean) / cntHeight) + 'px';

    e.preventDefault();

};

if (elem.addEventListener) {
    elem.addEventListener("mousewheel", doScroll, false);
    elem.addEventListener("DOMMouseScroll", doScroll, false);
} else {
    elem.attachEvent("onmousewheel", doScroll);
}

I imagine I'll have one class that listens to scroll events by either the virtual scroll method or the ui and then updates the ui scroller and the ui of the content I'm managing.

Anyway, I'll update this if I find anything more useful.

score -1 · Accepted Answer · edited May 23 '17 at 11:54

-1

I think avoiding using DOM elements/byte is going to be the easier solution for me than creating a fake scrolling experience.

UPDATE: I ultimately solved this as explained here: Javascript "infinite" scrolling for finite content?

edited May 23 '17 at 11:54

Community

1
1

answered Jul 30 '12 at 21:47

0xdabbad00

968
2
10
22

score -2 · Answer 4 · answered Jul 30 '12 at 21:48

-2

You're taking about using some serious javascript, specifically AJAX and JSON type elements. There is no easy answer to your questions. You'd need to do a lot of R&D on the subject.

answered Jul 30 '12 at 21:48

Billy Moat

19,702
6
42
37

Fake scroll bars in browser

4 Answers4