I have this code running with react js
<div style={{width:width, height:'1000px',overflowX:'hidden',overflowY:'scroll'}}>
<img src={img} style={{position:'relative', top:top, left:left, zoom:zoom+'%'}}/>
</div>
The variable top is a negative number. This allows me to start displaying the image at a certain height. And I can scroll down to the bottom of the image. However I cannot fully scroll all the way back up to the top of the image (not the initial position).Any ideas on how to allow that?
You should change the scrollTop property of the <div> instead of the top. You need JavaScript for this.
element.scrollTop = <your variable (positive)>
If for some reason you want only CSS, you can check set scrollTop and scrollLeft without javascript
Related
is there a trick to do this(cause i want my div to automatically scroll without javascript)
If you want do this without javascript you can make your div tag and hidden that. Then you can show your content when user scroll the page. Also you can use AOS library. Please see this link https://michalsnik.github.io/aos/
You can use a URL fragment:
example.com/example#divtoscrollto
<div> <div>{scrollable content}</div> <div id="divtoscrollto"></div> </div
Place an element at the bottom of the scroll content then if you change the url to that fragment for it's id it will jump to its location.
I have a set of bootstrap nav-tabs and inside these tabs are nice long information sections. Problem is that our team does not want to have all this information on such a long tab so we have made the tabs container element have an overflow: scroll property. This works great but now we are stuck with an impossibly long inline scroll section and it would take a good 30-40 mouse scrolls to get to the bottom. This will lose us site traffic.
I know that the definition of being a fixed position is being fixed relative to the browser window but I am in need of a way to use bootstrap scrollspy nav-list menu inside of the parent div and not have it able to transverse outside of that div. So we need it the same way that the class="fixed-to-top" attribute works so that is a functionable nav menu but no matter what we try it seems that the fixed positioning always reverts back to being relative to the broswer.
Is it possible to do what we are trying to do?
The code below is not a complete implementation, but I hope it gives you an idea of how it could be done. I.e. change the position property if the fixed div goes outside of its parent/container.
var $nlm = $('#navListMenu');
$(window).bind('scroll', function(){
if($nlm.offset().top < $nlm.parent().offset().top)
$nlm.css({ position:'absolute', top:0 });
else
$nlm.css({ position:'fixed'});
}
When using name="object" and then having the page scroll to that object using a href="#object" id it possible to adjust where the page lands. Rather than the top of the window, a few pixels down. I have a fixed navigation bar that when scrolling, the content goes behind so the nav bar is always visible. So when I use a href="#object" part of it is cut off because it is behind the nav bar.
Any fixes? Thank you.
Change the top padding and margin styling on the element with the named anchor. For example, if your header is 100 pixels tall, give your named anchor a margin-top of -100px and a padding-top of 100px.
See this jsFiddle example.
In this example, the link will bring the bolded text ('Vestibulum ante ipsum') 100px from the top of the page.
And if you want to set these properties (like mentioned from j08691) via a css selector, put this JS into your html, then you're able to give every anchor a class for it, if attribute-selectors don't work (older browsers):
function findAnchors(){
anker = document.anchors;
for(i=0; i<anker.length; i++ ){
anker[i].className = "anchor";
}
}
window.onload = findAnchors();
You can do this with jQuery.localScroll by setting an offset in the plugin configuration.
Here, have a fiddle.
I have a background that is a set of fairly complex gradients (done with CSS, not images). In the middle of the page is a fixed frame, and the content sits inside this frame. I can set overflow-y: auto on this frame to scroll the content, but I would like to be able to use the window to scroll instead.
Here is what the page looks like now:
I would like the scroll bar to be on the window instead. I can take the content outside of the frame and add margins as necessary, but the problem is that then the content will appear outside the frame. I could then cover it up on the top and bottom, but this is difficult/impossible because the background is not an image and is not solid.
Is there any way to have a transparent element at the top/bottom block text that scrolls under it? Can you somehow apply styles to content that overlaps?
Even the fanciest single-browser only solution that requires JavaScript is perfectly acceptable.
if all you're aiming at is hiding the scrollbar (and assuming you're ok with jQuery), i'd suggest to use something like slimScroll.
what's going on under the hood is simple: the designated container is assigned with overflow: hidden;, and attached with a hover handler - with the sole purpose of simulating a custom scrollbar in response to mouse-over events.
Try to explore jScrollPane features.
It's powerfull flexible JQuery plugin for working with scrollbars, possibly you will find solution with it.
I have a scrollable area that contains popup menus. Conceptually, something like this:
<div style="overflow:auto; width:100px; height:100px">
... content here that's big enough to trigger scrollbars...
<div>
Click here
<div style="position:relative">
<div id="popup"
style="display:none; position:absolute; width:150px; height:150px">
... more content. This div gets shown and hidden by jquery on click events.
</div>
</div>
</div>
</div>
The problem is that when the popup menu pops up, it is also contained within the scrolling div, and doesn't show up outside the 100x100 pixel scrollable area no matter how high I make the z-index. I realize of course that in a sense that's exactly what I asked for when I told the outer div to be overflow:auto in the first place. But for my use case it isn't what I want - I want the popup menu to be "over the top" and able to extend outside the scrollable area, while still staying in the right place, which is to say, directly underneath the "Click here" link. Even though the "Click here" link can move around as the container is scrolled.
I also realize that there are some complicated workarounds I could employ, like putting the popup entirely outside the scrollable div and using javascript to position it. And then I'd need to react to scroll events to reposition it as the content is scrolled, etc. Quite apart from needing to write lots of code to re-implement what the "position:relative/position:absolute" gave me for free, that'd also require quite a bit of refactoring of my own code, so I'd rather avoid it.
I'm wondering if there's some simple trick I can apply to my inner div to tell it to disregard its container's "overflow" property, or, failing that, a handy jquery script that will implement the complicated stuff for me behind the scenes so I just need to call it to get the effect I'm after.
I'd say that it's not possible to do that without using JS to calculate the position of the link and then display the popup with a position:fixed..
The problem is that your popup is inside a div with overflow:auto and everything inside that div will affect the scroll, so to show the popup you'll need to take it outside that div, and the only way i know to do that is by using the position:fixed... (or maybe using position:absolute on the popup, and a wrapper div with position:relative that contains the text and the popups)
so i'll propose 3 solutions:
put the popup outside the div with scroll, and when the user clicks
on the link, display the popup
calculate the exact position of the link (x,y) and display the popup using position:fixed and the coordinates
use a nice and always-easy-to-use "message box" (e.g. http://csscody.com/demo/wp-content/demo/popup/demo.htm) I know that this is not exactly what you wanted, but.. i ran out of ideas =D
I hope this helps
Displaying a popup inside a of a div with "overflow: auto", "overflow: scroll" or "overflow: hidden" will always generate this kind of issues. By rule, an element child can't be displayed beyond the parent's borders in all these cases because the overflow property makes precisely that. Using "position: fixed" to the popup will solve your issue BUT if you scroll down you'll see how the popup is displayed in the old position, previous to the scroll event. To solve this you can use JQuery, as follows:
$(".your-popup-PARENT-class").live( {
mouseenter: function(event) {
event.stopPropagation();
var position = $(this).offset();
$(this).find(".your-popup-class").css("top", (position.top + 30) );
$(this).find(".your-popup-class").css("left", position.left);
$(this).find(".your-popup-class").css("display", "inherit");
},
mouseleave: function(event) {
event.stopPropagation();
$(this).find(".your-popup-class").css("display", "none");
}
});
This code segment finds your popup parent element on the DOM tree, saves the current position and display the popup in the same position of the parent. As you can see, you can add or remove needed pixels, (bold code in previous CSS top definition).
Hopefully, this will be hepful for someone else with this kind of issue.
Kind regards!
I'm not sure what the effect you're going for is, but if you remove the popup's container, then the popup will show up outside of the scrollable div.
<div style="overflow:auto; width:100px; height:100px">
... content here that's big enough to trigger scrollbars...
<div id="popup"
style="display:none; position:absolute; width:150px; height:150px">
... more content. This div gets shown and hidden by jquery on click events.
</div>
</div>
I don't have an answer to this but if you ever found a good answer I'd love to hear about it. I have a very similar issue (I've a list of options for the user to select to modify the item in the scrolling section. It doesn't look so good if I'm near the bottom of the list.