If I point the mouse within the div tag, the scrolling works, however I can't scroll the content if I point the mouse outside the box of div. Is it possible to target a specific div wherever the mouse pointer goes?
<div style="max-height: 100px;overflow-y: scroll;">
TEST<br><br><br><br><br><br><br><br><br><br>
</div>
You can do something like this.
const target = document.getElementById("target");
document.addEventListener("wheel", function(e){
// prevent the default scrolling event
e.preventDefault();
// scroll the div
target.scrollBy(e.deltaX, e.deltaY);
})
#target{
height: 100px;
overflow-y: scroll;
}
<div id="target">
TEST<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
You can register the event by yourselves. Such that you can scroll the div you want outside the div.
Those this will be tedious for you to handle if your page has multiple scroller.
By the way, to make it a bit more pretty, you need to add animation or it will move 'discretely' as following shown.
document.getElementById("scroll").addEventListener("wheel", e=>e.preventDefault());
document.getElementById("main").addEventListener("wheel", e=>myFunction(e));
function myFunction(e) {
document.getElementById("scroll").scrollTop += 0.2 * e.deltaY;
}
<div id="main" style="height:300px">
<div id="scroll" style="max-height: 100px;overflow-y: scroll;">
TEST<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
Is it possible to target a specific div wherever the mouse pointer goes?
Not really... what you probably want to do instead is to set other parts of the page to position: fixed or position: sticky. This way the main body content will scroll but some parts will remain in the same place. Stack Overflow itself does this with the top header and the left sidebar.
Related
Using Draw2d and the menu selection code from the demo but I don't get the expected result...
In the demo, the menu appears on the right side of the clicked element. In my version the menu appears way off to the top.
This seems to be caused by the fact that I have some HTML directly above the canvas (header, etc...). On the contrary if the canvas is at the very top of the page it works well.
Found a way to fix this.
It's all about where you append the menu's HTML and relative positionning
In the demo there isn't any HTML above the canvas (on the website it's an iframe so what you see above is not really there from the canvas perspective) so it works.
The demo is misleading because in the code they add the HTML menu in the body tag. They can do that simply because their page is composed of only two elements : the body and the canvas.
In my case and probably yours too, doing this results in adding the HTML menu far far far far away from the canvas itself resulting in a position that is wayoff !
What they do is :
$("body").append(this.overlay);
What you should do is append the HTML menu (this.overlay) as a sibling of the canvas. Do NOT add it in the canvas itself. If you do, you won't catch click events anymore.
Your HTML should look like this :
<div id="some-parent">
<div id="gfx_holder">THE CANVAS</div>
</div>
And the code updated to
$("#some-parent").append(this.overlay);
But it's not finished yet. As the menu is added using position: absolute you'll need your parent containers set to position: relative so the the child's absolute position would become relative to the parent and not web page. It's CSS... You know...
Also, the parent should be the exact same size as the child canvas !
So the HTML should evolve to this :
<div id="some-parent" style="position: relative; height: 800px">
<div id="gfx_holder" style="height: 800px">THE CANVAS</div>
</div>
And when the menu's HTML is added it should look like that at runtime :
<div id="some-parent" style="position: relative; height: 800px">
<div id="gfx_holder" style="height: 800px">THE CANVAS</div>
<div class="overlayMenu" style="top: 230px; left: 197.391px;">⊕</div>
</div>
See ? The overlayMenu has position: absolute which allows it to be rendered at a correct position...
hf
I want to use bootstrap affix in a similar way to "How to Format" on the right side of Ask Question page of stackoverflow.
I can make it affix to the viewport by adding a css .affix { top: 70px } and use class='affix' data-spy='affix' in html, but what if I want the affix element to be fixed to a parent element?
For example, if I have such html:
<div class='affix-container'>
<div class='left-panel'>
some form, including a textarea
</div>
<div class='right-panel affix' data-spy='affix'>
how to format
</div>
</div>
I'd like right-panel to be affixed only relative to affix-container, so when I scroll down, if affix-container is still in viewport, then affix right-panel, otherwise let right-panel scroll up.
Can I still do this if affix-container is resizable? ie. its size/height increases with the resize of textarea it contains?
If you want to track the left-panel's scroll movement, you need to use a scroll-spy with the affix. You'll need the body tag setup first.
<body data-spy="scroll" data-target="#myScrollspy" data-offset="200">
Here the offset will ensure that tracking only starts at 200 from the top depending on header size etc. The right-panel then gets id="myScrollspy" e.g.
<div class="hidden-xs col-sm-2" id="myScrollspy">
<div class="right-panel affix" data-spy="affix" data-offset-top="400">
</div>
</div>
The fixing of the element is fixed at 400 offset (useful if you have a header etc.). You can then change the position with css as you scroll from a certain point forward. I've added things that's from my code extract and can be used/ignored i.e. on xs screens I hide my scrollspy, otherwise it takes up 2 cols in the parent row.
.affix {
top: 100px;
}
Should work with resizable container, but I didn't test it.
I have a div that I want to always move such that it is stuck to the top of the page. Let's just say that I cannot use position: fixed;
I originally used $(document).scroll(function(){}) to move the div with the scrolling. But this makes the site extremely slow after 10 seconds of scrolling.
My current solution is to use setTimeOut() to prevent multiple calls. However, this causes a delay, and the div only sticks to the top of the page once I have stopped scrolling.
Is there a way to get the continuous smooth moving of the div without killing my speed?
EDIT:
I have the following code:
<div id="outerDiv">
<div class="div">
<div class="fixed"></div>
<div class="otherDivs"></div>
</div>
<div class="div">
<div class="fixed"></div>
<div class="otherDivs"></div>
</div>
</div>
So .outerDiv has a fixed width, and there are many .div, such that outerDiv has overflow-x: scroll. If I use position: fixed on .fixed, then they will not show up properly. I want each .div to be like a column, with the heading of each column to move down
How about using two different divs. One containing the fixed content, and one containing the content which should be scrollable?
So you don't scroll within the document itself but only within the second div?
Or... use position:fixed
PROBLEM:
The contents of my div are positioned 'absolute' and the width of the contents are larger than the div.
As required the "extra" contents are clipped using "overflow-x: hidden".
Although, if I try to horizontal scroll using the mouse-scroller, the content get visible.
How do I not let this happen ? I am fine with using a JS or/and a CSS solution
e.g code
<body width='1000px'>
<div style='background-color: blue; width: 1200px'>contents</div>
</body>
Thanks !
I had the same problem, if you place it within a wrapper then it prevents trackpad scrolling.
#wrapper {
position: absolute;
width: 100%;
overflow-x: hidden;
}
I think the default behavior for the document body is to allow scrolling of content that is too big for it. This seems like it might not be too easy to work around.
Instead of specifying a width on your BODY, you could try using one more DIV and putting the width on that instead.
<div style="width:1000px;">
<div style="width:1200px;"></div>
</div>
Is there a reason you have to put width on the BODY tag?
You must use
$("element").on('mousedown', function(e) {}
Just change live to on
i have a situation of:
<div class="hey1"><img class="img1"></img></div>
<div class="hey2"><img class="img2"></img></div>
<div class="hey3"><img class="img3"></img></div>
so .img imgaes are in position:absolute; binded to right top corner of related .hey div
when i fadeOut(); for example .hey1 div, the other .hey2,.hey3 divs scrolls more on top (right) but images binded remains on same absolute position, what i would like is to bind .img images also when fading out related div
any way to do that?
Make sure your container divs have position.
Example: http://jsfiddle.net/redler/D6Ucg/
In the example, click a yellow box to make it fade out. Then see what happens if you re-run the test after removing the div { position: relative; } style.
Instead of positioning img elements absolutely with in div elements, position them relatively. This way they will move along with the div when div is re-positioned through scroll or programmatically.