Announcement

**Developer12145** · 21 Feb 2019, 09:29

I�m asking, because we have a layout where we don't want to show scrollbars, but have it scroll able. And as I now, there is no method to turn off both, custom scrollbars and browser scrollbars. Or am I wrong?

**Isomorphic** · 21 Feb 2019, 11:21

scrollbarSize:0 is not a valid setting.

Set overflow to hidden to avoid scroll bars but still clip content.

**Blama** · 22 Feb 2019, 02:03

Hi Isomorphic,

this does not work, e.g. here (v12.0p_2019-02-21):

Code:

isc.defineClass("BlueBox", "Label").addProperties({
    align:"center",
    border:"1px solid #808080",
    backgroundColor:"lightblue",
    styleName:"blackText"
});

isc.HLayout.create({
    width:600, height:600, membersMargin:20,
    overflow: "hidden",
    members:[
       isc.HLayout.create({
            showEdges:true,
            height:1000, membersMargin:5,  layoutMargin:10,
            members:[
                isc.BlueBox.create({width:50, contents:"width 50"}),
                isc.BlueBox.create({width:"*", contents:"width *"}),
                isc.BlueBox.create({width:"30%", contents:"width 30%"})
            ]
        })
    ]
});

Goal is to have a scrollable area without scrollbars, as it is clear from the display that the area is scrollable (vertically), but the scrollbars would break the design.
This works here with scrollbarSize: 1 (at least I do not notice scrollbars but IMHO this also generates also unnecessary markup:

Code:

isc.defineClass("BlueBox", "Label").addProperties({
    align:"center",
    border:"1px solid #808080",
    backgroundColor:"lightblue",
    styleName:"blackText"
});

isc.HLayout.create({
    width:600, height:600, membersMargin:20,
    overflow: "auto",
    scrollbarSize: 1,
    members:[
       isc.HLayout.create({
            showEdges:true,
            height:1000, membersMargin:5,  layoutMargin:10,
            members:[
                isc.BlueBox.create({width:50, contents:"width 50"}),
                isc.BlueBox.create({width:"*", contents:"width *"}),
                isc.BlueBox.create({width:"30%", contents:"width 30%"})
            ]
        })
    ]
});

Would a setter like "setUseScrollsbars(boolean useScrollsbars)" or similar not be a good thing?

Best regards
Blama

**Isomorphic** · 25 Feb 2019, 14:50

Why are you considering the area as not scrollable? It is programmatically scrollable. If you mean to make it scrollable via mousewheel, that's a bad idea (content hidden from user with no indication) and an accessibility violation.

**janusz** · 2 Apr 2019, 03:11

Hi,

I believe I have similar situation and I also would like to a way to disable scrollbars but keep the container scrollable.

My case is to have a series of photos with equal width side by side with only one image visible inside an outer container with width equals to one photos.. User can scroll using mousewheel but only to fixed position as the scroll snaps to show only full photos.
Instead of native or SmartClient scrollbar in the outer container I use custom "scrollbar" showing series of dots which are better suited to discrete values than scrollbar plus semi-transparent arrows that scroll outer container always by one width.
Even without scrollbar/dots/arrows this is more and more common on mobile - see switching between photos on Google Photos for example.

Best regards,
Janusz

**Blama** · 2 Apr 2019, 03:20

Hi Isomorphic,

sorry I forgot to answer. I still do think that this is good addition - "scrollable without scrollbar", even if it is an accessibility violation.
It might be correct the way it is for accessibility reasons, but is annoying from a design perspective.
Of course I could make "all background-color"-ScrollBar elements, but IMHO this would be a waste of time and also and more importantly DOM elements.

Best regards
Blama

**Isomorphic** · 2 Apr 2019, 15:11

This seems to be another instance where you would turn off the scrollbar via the existing overflow API and add mouseWheel handlers if you want, but again you want visible scrolling controls.. so already well covered by the existing behaviors and APIs. Are we missing something?

Announcement

Exception in Developer Console when scrollbarSize: 0

Comment

Comment

Comment

Comment

Comment

Comment

Comment