mobius1 / pageable Goto Github PK

Hi Mobius1,
thanks a lot for creating this! I'm playing with it these days and I started wondering about the window size.
I see that you are defining it using the window's inner dimensions:
width: window.innerWidth,
height: window.innerHeight

I wonder whether, especially for mobile, it wouldn't be better to use something else. For example I'm getting more consistent results using the body's dimensions:
width: document.body.clientWidth,
height: document.body.clientHeight

The issue with using window's dimensions on mobile is that most of the time part of the window is covered by the address bar (on Chrome at least) and even using innerWidth/innerHeight as you are doing, it doesn't seem to consistently return the available space, but rather the dimensions of the whole window. At least for me this makes the content quite often look not centered and it even goes out of the view.

Would you consider making this configurable somehow?

Again, thanks a lot for this library.

Not sure where to ask this.
Scrolling inside container doesn't freescroll. Scrolling anywhere on container executes pageable full page scroll animation. I realize that is by design, but is there anyway to set freescroll to true when scrolling inside a container on the page that has overflow-y set to scroll?

<section>
  *scroll here full page scroll
  <div class="overflow-y-scroll">
       A container with overflowed content meant to have default scroll or touch drag behavior
   </div>
</section>
*scroll here full page scroll
<section>
*scroll here full page scroll
</section

Any help with this would be appreciated.

I tried multiple ways, from hooks to class components, but none seem to be working for nextjs, can someone please provide a proper example or explanation on how to integrate this with next.js.

i'd really really love to use this but im not able to

Hi,

it is possible to make the dragging movements show some pixels of the next sections before jump to it like http://kenwheeler.github.io/slick/ ?

Thanks

like Fullpage, I want to use function 'onLeave'

on mobile, i just want to use normal scrolling.

Having an issue getting any data property other than index to update.

I have a vertical scroll initiated which is working great. Now I initiated another horizontal scroll with as container a div within the second page of the vertical scroll and other names for the data-anchors.
Since swiping/scrolling would be too glitch/risky I disabled those and use a button. So when I press the button everything works fine until the end of the animation. When the animation seems to stop the page is on the next page but then 'glitches' back to the first horizontal page. The active classes are on the right divs however.
Making a comment of
that.container.style.transform = "";
in _scrollBy makes it work for the 1st and 2nd page but not others. And that also doesn't make vertical animations work well.

It's not working in Chrome & FF (didn't test other browsers).

I have an API returning results back into the container. Unfortunately, it doesn't seem to pick up the new data-anchors on those elements. Is there a way to tell pageable to reevaluate the container?

Hi

I use Pageable as a slideshow, and some slides use Colorbox to pop up or pop out images
I wish to show something.

Whilst viewing inside Colorbox, Pageable will scroll away from the original slide.

Is there a way to prevent this scrolling?

Using Windows7, Firefox 69.0.2 (32-bit)

pips: true,
animation: 100,
delay: 300,
throttle: 150,
orientation: "horizontal",
easing: function easing(t, b, c, d, s) {
return -c * (t /= d) * (t - 2) + b;
},
onInit: noop,
onUpdate: noop,
onBeforeStart: noop,
onStart: noop,
onScroll: noop,
onFinish: noop,
swipeThreshold: 50,
freeScroll: false,
slideshow: false,
infinite: false,
childSelector: '[data-anchor]',
events: {
wheel: true,
mouse: true,
touch: true,
keydown: true
}

웹에서 확인 했을 때는 a tag link가 잘 눌러지나,
모바일 핸드폰에서 확인 시에는 눌러지지 않음 .
해결할 방법을 알고 싶습니다.
샘플
http://dwitt.dothome.co.kr/smc/p04/06/

Great job but seems no compatible with IE 11. Could you add it ?

Before the window resize event is over, your event is running. (matching width and height)
That part is as follows.

'window.addEventListener ("resize", this.callbacks.update, false);

Pageable.prototype.update = function () {
  ...
};

I'm not good enough, I need your help. I cheer you. Thank you.

Hello,
Is it possible to put a custom distance before the drag or swipe event is fired ?
Now it's like 1px down or up trigger the related event but I added a slider inside with swipe/drag and if i don't do a perfect line left or right then it change page and don't slide.

It points to a file that does not have a main value in the package.json file.

package.json 파일의 main 값이 없는 파일을 가리키고 있습니다.

Hello, thanks for this great script.

How to automatically maintain the height of a footer when scrolling?

Expected demo: https://alvarotrigo.com/fullPage/examples/autoHeight.html

Hi, address bar doesn't scroll/hide in mobile Safari or Chrome when scrolling.
Is there a solution for this?

It works in Chrome but not Firefox for Ipad-sized websites or smaller. I get the following error:

TypeError: evt is undefined.
pageable.js:815:20

To reproduce:

Open Firefox browser, navigate to: https://mobius1.github.io/Pageable/
CTRL+SHIFT+I to open the developer tools. Set the page view size in the devs tools to Ipad or lower. Try to scroll by swiping or with the mouse.

After resizing the browser window when again maximize the window. it remains in same size with scroll bar.

Hi,

Thanks for the great plugin!

Is it possible to add in an option to disable the keydown event?

This appears to be hijacking other keydown events I have on the page - like with inputs.

Something like

events: {
    keydown: false,
}

Same as title.
Whole pages for vertical, but also want to make some pages for horizontal.

Same as title.
Whole pages for vertical, but also want to make some pages for horizontal.

• events not fireing
• pips not updating
• page snapping not working

Tested on MS Surface Pro and Samsung Galaxy Book Flex.

How to change pips color?

Events inside box doesn`t works on mobile chrome browser.
Chrome 77.0.3865.116

	const options = {
		pips: true,
		infinite: true,
		easing: function(currentTime, startPos, endPos, interval) {
			// the easing function used for the scroll animation
			return -endPos * (currentTime /= interval) * (currentTime - 2) + startPos;
		},
	}

More:

Plugin works well only in the web version on a real mobile device works like shit. Why does pugin try to render a block every time? he doesn’t succeed, the layout floats loaded for a long time. Why can't you make a dumb scroll from block to block only?
This is not ready for production, please correct the errors or do not mislead people so that there is no waste of time

It is a very cool script, but I want it to use responsive.
If I resize my window, the content-high in the box will be greater. Or if my content-high greater than the Pageable-High ... the user has no chance to scroll in this box!
Is there an opinion that the user can scroll in this box, if the content higher as the Pageable .. or (better) is there an opinion that the Pageable will be greater (higher) that the user can scroll to the end and than he jump to the next Pageable?
Thank you very much.
Greetings

Hi!

I noticed that with a touch input (either with a mobile device or Chrome responsive emulation) clicking on a link doesn't work unless you "double touch" it.

However, this doesn't happen if you set touch events to false on initialisation, so I thought this was caused by Pageable catching the touch to swipe thus preventing to trigger the link's.

This behaviour can be replicated in the playground by replacing a page text with a link while in responsive mode in chrome.

If anyone else reading this is affected by this issue and looking for a temporary solution : I fixed it with some JS by adding a listener on the affected links that redirects to their url but that isn't ideal

Array.from(document.querySelectorAll('.myLink')).forEach((el) => {
  el.addEventListener('touchend', () => {
    window.location.href = el.href;
  });
});

https://github.com/Mobius1/Pageable/blob/master/docs/README.txt

Normal scrolling works during animation, that offsets position if swiped during it and animation ends up being offset. Next switch is abrupt since predicted position is incorrect. Project demos have that issue as well.

Tested on mobile Chrome 80.0.3987.132

I am using pageable in a react app and I am not able to see navigation pips by default

Hi, Thanks for this great script.

I have 2 question:

1. Can you tell me how i set scroll style pageable slider? please look here: https://alvarotrigo.com/fullPage/examples/scrollBar.html (http://prntscr.com/m2900e)

2. If i have scrolling header and footer so how to keep height auto for that header and footer?

Expected demo: https://alvarotrigo.com/fullPage/examples/autoHeight.html

first: that‘s a great demo of this library.

second: the anchor links on the right are out of functionality if you click on it.

Can't disable events in settings
events: { wheel: false, // enable / disable mousewheel scrolling mouse: false, // enable / disable mouse drag scrolling touch: false, // enable / disable touch / swipe scrolling keydown: false, // enable / disable keyboard navigation },

I created React app and when I use Pageable its thrown a error: App.jsx:9 Pageable: The container could not be found.

Code example:

import { useState } from 'react'
import Pageable from 'pageable'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)
  const pageable = new Pageable('#container', {
    childSelector: "[data-anchor]",
    anchors: [],
    animation: 700,
  });

  return (
    <> 
      <div id="container">
        <div data-anchor="Page 1" className='section'>
                    <div>
                      <a href="https://vitejs.dev">
                        <img src={viteLogo} className="logo" alt="Vite logo" />
                      </a>
                      <a href="https://react.dev">
                        <img src={reactLogo} className="logo react" alt="React logo" />
                      </a>
                    </div>
                    <h1>Vite + React</h1>
                    <div className="card">
                      <button onClick={() => setCount((count) => count + 1)}>
                        count is {count}
                      </button>
                      <p>
                        Edit <code>src/App.jsx</code> and save to test HMR
                      </p>
                    </div>
                    <p className="read-the-docs">
                      Click on the Vite and React logos to learn more
                    </p>
        </div>
        <div data-anchor="Page 2" className='section'>
                    <div>
                      <a href="https://vitejs.dev">
                        <img src={viteLogo} className="logo" alt="Vite logo" />
                      </a>
                      <a href="https://react.dev">
                        <img src={reactLogo} className="logo react" alt="React logo" />
                      </a>
                    </div>
                    <h1>Vite + React</h1>
                    <div className="card">
                      <button onClick={() => setCount((count) => count + 1)}>
                        count is {count}
                      </button>
                      <p>
                        Edit <code>src/App.jsx</code> and save to test HMR
                      </p>
                    </div>
                    <p className="read-the-docs">
                      Click on the Vite and React logos to learn more
                    </p>
        </div>
        <div data-anchor="Page 3" className='section'>
                    <div>
                      <a href="https://vitejs.dev">
                        <img src={viteLogo} className="logo" alt="Vite logo" />
                      </a>
                      <a href="https://react.dev">
                        <img src={reactLogo} className="logo react" alt="React logo" />
                      </a>
                    </div>
                    <h1>Vite + React</h1>
                    <div className="card">
                      <button onClick={() => setCount((count) => count + 1)}>
                        count is {count}
                      </button>
                      <p>
                        Edit <code>src/App.jsx</code> and save to test HMR
                      </p>
                    </div>
                    <p className="read-the-docs">
                      Click on the Vite and React logos to learn more
                    </p>
        </div>
      </div>

    </>
  )
}

export default App

Hi
Struggling with CSS. I'd like to place a different button per page bottom right, like the ones in material-design of android. But no matter what they overlap each other and are not sticky to it's page.

To be clear, this is not a bug, this is just a question of somebody unable to do proper CSS :)

https://jsfiddle.net/chlehmann/nt8eq5x0/

Any help would be much apreciated!!

I've noticed that when scrolling on a trackpad that Pageable has a tendency to scroll through two or more pages (depending on how "aggressive" the scroll gesture was). This is something that I've been able to replicate in multiple browsers (Chrome/Firefox/Safari) and on both Mac and PC.

Should also note that adjusting the swipeThreshold doesn't seem to affect this behavior, and that it is still possible to only scroll one page at a time (albeit with significantly and unnaturally small swipe gestures on the trackpad).

It would be great if events could be able to disable/remove.
For example:

wheel: false,
touch: false

With this options it would be easier to allow only buttons for further js-events.

Hello do you know if it's possible to use this within a react app and if so how? I have tried integrating it in a few different ways but it does not seem to work.

How can I use Pageable with React??

There's a problem on Chrome Version 75.0.3770.142 (Official Build) (64-bit) / Wiindows10.

When pg-wrapper element has box-sizing: border-box; which I have because of globally applying css reset (including) border-box setting to all elements, horizontal scroll appears (and stays) on pg-wrapper after the script init, overwriting this setting by:

.pg-wrapper {
  box-sizing: content-box;
}

solves the issue.
This problem appears only on Chrome.

I'm trying to destroy the instance as shown

...
  useEffect(() => {
    return () => {
      if (window.pageable) {
        window.pageable.destroy();
      }
    }
  }, [])
...

but this is not working,
In spa when I'm navigating to another route I'm still facing the full page snap scroll working.
Not able to get back to the normal scroll state for different pages in my application.

Please help!