I'm just getting familiar with working with binding. I have this file here: https://gist.github.com/JelaniThompson/74d062c5a28a18b75ca91cd44cd04d56
Does anyone know why y constantly returns 0 as opposed to the actual scroll position? I feel like this is more of a CSS issue than a Svelte issue but I could be mistaken.
When I did window.addEventListener instead, no events were being fired even on scroll with this HTML structure
You are scrolling the scroller element but binding to scrollY on window. Because the window is not being scrolled, scrollY remains 0.
If you want to know how far the scroller element has been scrolled, you should use scrollTop instead. Svelte won't automatically bind this for you, so you'll need to set up the event listener yourself.
<div class="container">
<div class="scroller" on:scroll={(e) => console.log(e.target.scrollTop)}>
<!-- etc -->
</div>
</div>
Keep in mind that the scroll events fire at a high rate and you may need to throttle it to prevent performance issues.
Related
I'm using the component in semantic to create a top menu + breadcrumb header. For some reason, the scroll bar "jumps" when trying to scroll from the topmost position
Sandbox https://codesandbox.io/s/y7k3zn5qn1
I haven't provided the context prop to the sticky component. In the examples they have always provided the React DOM reference of the enclosing div as the context prop to the Sticky component. The documentation is not clear as to the purpose of the context prop. (It says "Context which sticky element should stick to")
Do I need to provide a context prop to the sticky component to stop the "jump" scrolling? If so, how do I decide which enclosing div ref to provide as the context prop?
While scrolling, position:fixed; is added to the parent of <div class="ui inverted menu">. This moves out the element from the dom structure thus removing the space which it occupied. Therefore, the sibling jumps up occupying the free space.
You may manually add margin-top to the sibling while the position is set as fixed, as a workaround.
I used a Rails component to wrap the Sticky component and applied padding/margin offset to the sibling.
The rail makes the sticky act like overlay and not part of the parent div. Just need to add custom css to the rail to override the default behaviour.
Context ref allows the sticky to be stuck through out the context of that element.
Made some changes to the code sandbox Sticky Menu Example
I kind of solved it for myself. Tried adding rail as in above solution but didn't work.
I realized the problem for me was the pre-render library I was using. Rather than getting rid of pre-render library, I added an active attribute to Sticky, with it being false by default (stored in state). Then, after 3-second delay, I turned it on (set active attribute in the state to active). I chose 3 seconds because I believe that's how long my pre-render took to compose each page (I'm not exactly informed on the details of how it does this).
Like:
componentDidMount() {
...
//Enable sticky functionality after delay
setTimeout(function() { //Start the timer
this.setState({
controls: {
...this.state.controls,
isStickyActive: true,
}
}) //After 3 seconds, set isStickyActive to true
}.bind(this), 3000);
...
}
I am building a bootstrap-grid column inside of which I have a panel.
Inside this panel I have a datepicker and there must a lot of other controls so I would need to be able to scroll down (y-axis only) inside the panel.
Unfortunately the datepicker popup window is partially hidden because of the overflow-z and overflow-x styling which enables the scrolling :
<div style="height: 480px;overflow-y: scroll;overflow-x:hidden;">
...
</div>
Is it possible to overcome this with some CSS trick?
I have found an answer on SO when the element poping out can be placed outside of the div but in my case I'm using a directive from the Angular-strap library so I need to place it inside.
I have set up a plunker to illustrate the issue (you need full-view to see it) : plunker
Well, since no one bothered to answer, I just found the answer today, which was actually very simple.
I just needed to add this in the attributes :
data-container="body"
Plunker here
I'd like some child div of a main div be hidden by default an visible when you hover over the main div.
I'm trying to have that native in angular and forget the .hover() way in jquery.
I though about using ng-show on the child div and then updating the binding when I hover the main div. Is there a directive to listen for hovering?
You're on the right track. You can actually use the ngMouseenter and ngMouseleave directives to do this.
<span ng-mouseenter="show = true" ng-mouseleave="show = false">
Mouse over me.
</span>
<div ng-show="show">Hello!</div>
Here's a working Plunker: http://plnkr.co/edit/Ro80nR7HT7OGGPCXjz7E?p=preview
#Swordfish0321 is also right - you can write a very simple directive to listen specifically for the hovering if you'd like, but it may not be necessary. We use mouseenter and mouseleave for tooltips in UI Bootstrap, for example.
Thanks to #JoshDavidMiller for a very succinct answer. I had a need to do this in an ng-repeat and couldn't quite figure out an elegant way to do it. Using a boolean on the scope was showing the edit controls for all elements in the list instead of just the one I was hovering over. I almost stooped to whipping out angular.element (i.e. JQuery) and attaching hover handlers myself so they could manually show just the controls for the hovered element. I am glad I didn't stoop to such evil ways.
<div ng-repeat="item in items" ng-mouseenter="item.showEdit = true" ng-mouseleave="item.showEdit = false">
<span class="glyphicon glyphicon-edit" ng-show="item.showEdit"></span>
Mouse over me.
</div>
Simply attach the property to the item rather than $scope. In a few situations I couldn't add random keys to the items in my list so I mapped my array to a new one where the item is actually a property on a wrapper object, then I could attach any properties I wanted to the wrapper object without polluting the item keys.
We're using JQuery FullCalendar latest version with draggable option on. The external event div is filled with values from the database. The div height is limited. So we added overflow auto to the external event container div.
It created a glitch that makes the event invisible when dragging it on the calendar. It also created a glitch that makes both scroll bar appears when dragging the event off the external event container.
I realise we are probably using the wrong tool for the job. Is there a proper way to solve this problem ?
Thanks
Its in fact more jquery draggable issue.
This code for external draggable events placed in div with overflow: scroll worked for me:
$(element).draggable({
scroll: false,
helper: 'clone',
zIndex: 999,
revert: true,
revertDuration: 0
});
Check also jQuery Draggable and overflow issue
Hi I am working on tabNavigator in flex 3.
I have tileList within it. Contents in the tab comes dynamically so I cannot provide explicitly fixed height and width.
I need to resize the tabs depending on the contents within it.
To resize the tabs I have enabled 'resizeToContent' property of tabNavigator.For some reason it is not resizing as expected.
Could anybody please suggest me the way out of it.
Thanks
Hey thanks Gregor for you reply,
'resizeToContent' works fine for other child items in tabNavigator but fails when I use tileList as child in tabNavigator that time tileList resizes to its default size(4 rows are only visible). So i was wondering if there any way so that I can force tileList to display all its items without putting scrollbars after its default size.
just by invalidating size on creationComplete ,will that resize all tabs for me. I am having n-number of tabs in tabNavigator as user can add tabs and content within it.
Could you please explain me, how can I achieve this.
I am new to flex so just getting confused with its behaviorand struggling with this issue from long time.
resizeToContent only works when the user changes tabs. If you want the tab to resize once the content has been added, you need to listen for the appropriate event (creationComplete probably) and invalidate the size of the TabNavigator. That will give it an opportunity to resize itself.