Is this possible without using javascript?

Question

I made a simple web UI with JSFiddle and I am wondering if the same UI can be made without using JavaScript.

A Fiddle says more than 1000 words.

So the question is (because it seems unclear for some people): How can I achieve the same results without using any JavaScript?

PS: I don't want to use JavaScript to re-calculate the position on every scroll event because the repositioning in IE is not smooth enough.

HTML:

<div class="A">
    <div class="B">
        B
    </div>

    <div class="C">
        This stays fixed when scrolling horizontally, but scrolls along when scrolling down the parent.
    </div>
</div>

CSS:

.A {
    background-color: yellow;
    height: 400px;
    width: 700px;
    overflow:scroll;
    position: relative;
}

.B {
    background-color: green;
    height: 1000px;
    width: 1500px;
    position: absolute;
    top:0;
    color:white;
}

.C {
    background-color: red;
    position: absolute;
    left: 100px;
    top: 0px;
    height: 1000px;
    width: 100px;
}

JS (with jQuery):

$('.A').scroll(function(e) {
    $('.C').css('left', e.target.scrollLeft + 100);
});

What is the purpose of designing it without any Javascript? Probably possible with position trickery. — esqew
– esqew, Commented Aug 11, 2014 at 15:49
Sounds pretty simple, you want two containers, container1 is really tall, and contains red and container2, container2 contains green. Both have scroll enabled for a given direction(container1 has vertical scroll, container 2 has horizontal scroll) — scragar
– scragar, Commented Aug 11, 2014 at 15:50
You can have CSS make something fixed/unmoving very easily. But "dynamically" fixed so that the thing unsticks and starts moving upon some event/condition, you'll need JS — Marc B
– Marc B, Commented Aug 11, 2014 at 15:50
@esqew The position trick is not acceptable because IE renders it too laggy. — Memet Olsen
– Memet Olsen, Commented Aug 11, 2014 at 15:56
Just float C to the left and add a margin of 100px. Also set the height to 10%. By float I'm talking about setting it's position to absolute. — Derek 朕會功夫
– Derek 朕會功夫, Commented Aug 11, 2014 at 16:21

bjb568 · Accepted Answer · 2014-08-17 05:05:23Z

6

When enough browsers support it, you will be able to use the new sticky position value:

.C {
    position: sticky;
    position: -webkit-sticky;
    left: 100px;
    top: auto; /* Default value */
}

http://jsfiddle.net/5z3nLqq5/12/

edited Aug 17, 2014 at 5:05

bjb568

11.5k11 gold badges53 silver badges73 bronze badges

answered Aug 11, 2014 at 16:05

Oriol

291k71 gold badges459 silver badges535 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Memet Olsen Over a year ago

I don't think that is a good idea: caniuse.com/css-sticky but I do appreciate your answer.

BoltClock Over a year ago

If you're going to suggest something like position: sticky, you might as well use top: initial so you don't have to annotate it with a comment. Or better yet, just remove it entirely - it's not needed at all. Also, AFAIK position: sticky has only been tech-demoed at Mozilla using Aurora, and I don't know anything about its status in WebKit/Blink. Simply saying "you can use it" is at best misleading and at worst, flat out wrong, and the fact that the demo doesn't even work unless you happen to be on a nightly build, does not help matters.

Oriol Over a year ago

@BoltClock Uhm, I should have checked browser support before answering. I assumed it would be better because I use Firefox Nightly, so it has been working for me for a considerable amount of time.

OJFord Over a year ago

I'm glad it's coming though!

BoltClock Over a year ago

Also, just for the record, if there existed a trivial way to do this using current implementations of CSS, they probably wouldn't have bothered to introduce position: sticky.

|

Dbl · Accepted Answer · 2014-08-11 16:22:21Z

2

I've played around with your sample (css only) and got it into a state where it was ALMOST right but not close enough imo. However since you're saying it's not fluent enough in IE i want to suggest this to you:

var $cRef = $('.C');
$('.A').scroll(function(e) {
 $cRef.css('left', e.target.scrollLeft + 100);
});

The biggest problem with IE isn't that calculations are that much slower, but that dom querys can be awfully slow depending on what version it is. Caching dom elements can make a big difference.

PS: Yes, i know you are looking for a NON-JS solution. But granting your reasoning this script might solve your issue, instead of having no solution in the end because it could be hard to get a cross browser solution which works on all platforms.

answered Aug 11, 2014 at 16:22

Dbl

5,9944 gold badges52 silver badges74 bronze badges

2 Comments

Memet Olsen Over a year ago

Nice approach, but unfortunately IE (11) still shows lag. I appreciate your effort.

Dbl Over a year ago

@MemetOlsen Unfortunately you're right. Despite it beeing faster in lower versions it's still lagging behind. (while Chrome and FF show no delay at all... sigh). Solving this with just CSS and HTML might be awfully tricky.

Andranik · Accepted Answer · 2014-08-11 17:02:08Z

0

I added another container to the HTML code, like this:

<div class="container">

    <div class="A">

        <div class="B">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
        </div>

    </div>

    <div class="C">
        This stays fixed when scrolling horizontally, but scrolls along when scrolling down the parent.
    </div>

</div>

Then added some style to the container class

.container {
    background-color: green;
    height: 400px;
    width: 700px;
    position: absolute;
    top:0;
    overflow-x:hidden;
    overflow-y:scroll;
}

And made some changes to A and C classes. I know it is NOT the result that we want, but it is similar to it: Here is the fiddle http://jsfiddle.net/gnfwg08c/

answered Aug 11, 2014 at 17:02

Andranik

903 bronze badges

1 Comment

Memet Olsen Over a year ago

Unfortunately not acceptable because the horizontal scroll bar is moving upwards and downwards when scrolling vertically. Nice try though.

woojoo666 · Accepted Answer · 2014-08-17 05:26:28Z

0

Seems to work:

JsFiddle

Added a container for B that was the width of A but the height of B. Works if you don't mind the horizontal scrollbar at the bottom of B (which you can hide using webkit-scrollbar: JsFiddle) :/

edited Aug 17, 2014 at 5:26

answered Aug 17, 2014 at 4:53

woojoo666

7,9417 gold badges50 silver badges60 bronze badges

1 Comment

Memet Olsen Over a year ago

Thank you for your answer but that's not the same result. I need to scroll horizontally with a scrollbar without scrolling to the bottom to see the scrollbar.

Collectives™ on Stack Overflow

Is this possible without using javascript?

4 Answers 4

6 Comments

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related